首頁 >web前端 >js教程 >自己寫的兼容ie和ff的線上文字編輯器類似ewebeditor_其他特效

自己寫的兼容ie和ff的線上文字編輯器類似ewebeditor_其他特效

WBOY
WBOY原創
2016-05-16 17:46:471190瀏覽

怎麼說呢,剛包完夜吧,應該很累了,但現在仍有力氣敲打著這些字符,看來我還沒到此為止。
廢話少說,最近寫了個在線的編輯器,類似ewebeditor那樣的,當然沒有人家那麼強大,但是基本功能都有,而且還是兼容ie和ff的,為此我也花了不少功夫,還是趕緊把代碼祭出來吧
demo.html

複製代碼 代碼如下:
















字型:
字號:



















core .js
複製程式碼 程式碼如下:

sx={};
sx.comm={};
sx.comm.string=function(){
if(!String.prototype.left){
String.prototype.left=function(l){
return this.substr(0,this.substr(0, l);
}
}
if(!String.prototype.right){
String.prototype.right=function(l){
return this.substr(this.length- l,l );
}
}
if(!String.prototype.trim){
String.prototype.trim=function(){
return this.replace(/^/ s |/s $ /g,"");
}
}
}();
sx.comm.array=function(){
if(!Array.prototype. indexOf){
Array.prototype.indexOf=function(data){
for(var i=0; iif(this[i]==data){
break;
}
}
返回i==this.length?-1:i;
}
}
if(!Array.prototype.lastIndexOf){
Array.prototype.lastIndexOf=function(data){
for(var i=this.length-1;i>gt ;=0;i--){
if(this[i]= =data){
break;
}
}
回我;
}
}
if(!Array.prototype.clone){
Array.prototype .clone=function(){
var temp=[]
for(var i=0;iif(this[i] instanceof Array){ temp[i]=this[i].clone()
}其他{
temp[i]=this[i];
}
}
返回溫度;
}
}
if(!Array.prototype.every){
Array.prototype.every=function(o,f) {
for (var i = 0; i
this.length; i ) {
if (this[i] 備份實例) {
this[i].every(o,f); }
}
else {
f.call(o, this[i]);
}
}
}
}
}();
sx.comm.ver=function(){
嘗試{
HTMLElement;
回傳「ff」;
}catch(e){
return "ie";
}
}();
sx.comm.ext=function(){
if(sx.comm.ver=="ff"){
HTMLElement.prototype.__defineGetter__("outerHTML",function(){
var attr;
var attrs=this.attributes
var str="for(var i=0;iattr=attrs[i];
if(attr.specified)
str =" " attr.name '="' attr.value '"';
}
if(! .canHaveChildren )
return str ">"
return str ">" this.innerHTML "" this.tagName.toLowerCase() ">});
HTMLElement.prototype.__defineGetter__("canHaveChildren" ,function (){
switch(this.tagName.toLowerCase()){
case "區域":
case "base":
case "basefont":
case "col" :
case "frame":
case "hr":
case "img":
case "br":
case "input":
case "isindex":
case "input":
case "isindex":
case "link":
case "meta":
case "param":
回傳false;
}
回傳true
}); .selectNodes = Element.prototype.selectNodes = function (){
//alert(arguments[0]);
var oNSResolver = this.createNSResolver(this.documentElement)
var aItems = this.evaluate( argument[0].toLowerCase() , this, oNSResolver,
XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null)
var 結果= [];
for( var i = 0; i {
aResult[i] = aItems.snapshotItem(i);
}
//alert(aItems.snapshotLength);
回傳一個結果;
}
}
}();
sx.event={};
sx.event.target=function(){
if(window.event){
return window.event.srcElement;
}else{
var f=arguments.callee.caller;
while(f){
if(f.arguments[0] instanceof Event){
return f.arguments[0].target;
}
f=f.caller;
}
}
}
sx.event.event=function(){
if (window.event) {
return window.event;
}else{
var f=arguments.callee.caller;
while (f) {
if (f.arguments[0] instanceof Event) {
return f.arguments[0];
}
f = f.caller;
}
}
}
sx.event.latedtarget=function(){
if(window.event){
if(window.event.type=="mouseover" ){
返回window.event.fromElement;
}else if(window.event.type=="mouseout"){
return window.event.toElement;
}
}else{
var f=arguments.callee.caller;
while (f) {
if (f.arguments[0] instanceof Event) {
return f.arguments[0].latedTarget;
}
f = f.caller;
}
}
}
sx.event.stopevent=function(){
if (window.event) {
window.event.returnValue=false;
window.event.cancelBubble=true;
}else{
var f=arguments.callee.caller;
while(f){
if(f.arguments[0] instanceof Event){
break;
}
f=f.caller;
}
f.arguments[0].preventDefault();
f.arguments[0].stopPropagation();
}
}
sx.event.addevent=function(e,t,f){
if(!arguments.callee.event){
arguments.callee.event=[] ;
}
if(e.attachEvent){
e.attachEvent("on" t,f);
}else{
e.addEventListener(t,f,false);
}
arguments.callee.event.push(f);
返回arguments.callee.event.length-1;
}
sx.event.removeevent=function(e,t,i){
if(e.detachEvent){
e.detachEvent("on" t,sx.event.addevent.事件[i]);
}else{
e.removeEventListener(t,sx.event.addevent.event[i],false);
}
sx.event.addevent.event[i]=null;
}
sx.event.parseevent=function(e,t){
if (sx.comm.ver=="ie"){
e.fireEvent("on" t);
}else{
var evt = document.createEvent("事件");
evt.initEvent(t, true, true);
e.dispatchEvent(evt);
}
}
sx.dom={};
sx.dom.text=function(e){
返回 this.e.innerText?this.e.innerText:this.e.innerHTML.replace(//<.>/igm ,“ 」);
}
sx.dom.elementnodes=function(e,flag){
var temp=[];
var a=e.childNodes
for(var i= 0 ;iif(a[i].nodeType==flag){
temp.push(a[i]);
}
}
回傳溫度;
}
sx.dom.elementallnodes=function(e,flag){
var temp=[];
var a=e.getElementsByTagName("*"); >for( var i=0;iif(a[i].nodeType==flag){
temp.push(a[i]);}
}
回傳溫度;
}
sx.dom.xpath=function(e,mode){
p=e.cloneNode(true);
var s=p. getElementsByTagName("script") ;
for(var i=0;ip.replaceChild(s[i].cloneNode(false),s[i]); >var html=p.outerHTML. replace(//=(?!"|')(.*?)(?=/s|>)/ig,"=/"$1/"");
if (window.ActiveXObject){
var x=new ActiveXObject("Msxml2.DOMDocument");
x.async=false
x.loadXML("" html);
}else{
var oParser = new DOMParser(); //alert(html); oParser.parseFromString(html,"text/xml");
//alert(x.documentElement.tagName);
var div=x.selectNodes(mode); (div.長度);
var temp=[]
var a1=x.selectNodes(e.tagName.toUpperCase() "//*");
//alert(a1.length); ;
var all=e.getElementsByTagName("*");
//alert(all.length);
var i1=0
for(i=0;i//警報(i);
if(a1[i]==div[i1]){
temp.push(all[i]); 🎜>}
}
x=null;
回傳溫度
}
sx.dom.left=function(e){
if(document.getBoundingClientRect){ return e.getBoundingClientRect().left;
}其他{
var a=e;
var 左=0;
while(a){
left =a.offsetLeft; 🎜>a=a.offsetParent;
}
向左回傳
}
}
sx.dom.top = function(e){
if(document.getBoundingClientRect){
回傳eient.getBoundingClect( )。
}其他{
var a=e;
var 頂部=0;
while(a){
top =a.offsetTop;
a=a.offsetParent;
}
回頂端;
}
}
sx.dom.getstyle=function(e,prop){
if(e.currentStyle){
return e.目前樣式[屬性];
}else{
回傳 document.defaultView.getCompulatedStyle(e,null).getPropertyValue(prop);
}
}
sx.dom.setstyle=function(e,data){
for(var i in data){
e.style[i]=data[i];
}
}
advance.js:
var $=function(id){
return document.getElementById(id);
}



edit.js





複製代碼

代碼如下:

var w=$("content").contentWindow;
w.document.designMode="on";
w.document.open();
w.document.write ("")
w.document.close();
if(sx.comm.ver=="ie") {
//w.document.body.style.lineHeight="10px";
}
w.document.onkeydown=function(){
if(sx.comm.ver==" ie"){
if(w.event.keyCode==13){
var s=w.document.selection.createRange();
s.pasteHTML("
");
w.focus();
回傳錯誤;
}
}
}
function wnd(){
var main=document.createElement("div");
sx.dom.setstyle(main,{
位置:"絕對",
寬度:"100%",
高度:"100%",
背景顏色:"淺藍顏色",
濾鏡:“alpha(不透明度=50)”,
不透明度:0.5
});
var body=document.createElement("div");
sx.dom.setstyle(body,{
位置:"絕對",
寬度:"200px",
高度:"250px",
背景顏色:"綠色",
zIndex :1000
});
var title=document.createElement("div");
sx.dom.setstyle(title,{
寬度:"200px",
高度:" 20px",
backgroundColor:"藍色",
});
var close=document.createElement("span");
sx.dom.setstyle(close,{
marginft :"180px",
顯示:"塊",
寬度:"20px",
高度:"20px",
textAlign:"居中",
遊標:"指針" textAlign:"居中",
遊標:"指針"
});
close.innerHTML="X";
close.onclick=function(){
main.parentNode.removeChild(main);
body.parentNode.removeChild(body) ;
}
title.appendChild(close);
body.appendChild(標題);
var content=document.createElement("div");
sx.dom.setstyle(content ,{
寬度:"200px",
高度:"230px"
});
body.appendChild(內容);
this.show=function(e){
document.body.appendChild(main);
sx.dom.setstyle(main,{
上:"0px",
左:"0px"
});
document.body .appendChild(body);
sx.dom.setstyle(body,{
top:sx.dom.top(e) e.clientHeight "px",
left:sx.dom.left(e ) e.clientWidth "px “,
});
}
this.close=關閉;
this.main=main;
this.body=body;
this. title=標題;
this.content=內容;
}
函數bold(){
w.document.execCommand("bold",null,null);
}
}
}
function italic(){
w.document.execCommand("italic",null,null);
}
function left(){
w.document.execCommand("JustifyLeft",null, null);
}
函數中心(){
w.document.execCommand("Justifycenter",null,null);
}
function right(){
w. document.execCommand("Justifyright",null,null);
}
function FontName(value){
w.document.execCommand("FontName", false, value);
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
) >function FontSize(value){
w.document.execCommand("FontSize", false, value);
}
函數inserthr(){
if(document.selection){
函數inserthr(){
if(document.selection){
w.focus();
var s=w.document.selection.createRange();
s.pasteHTML("
");
}其他{
w.focus( );
var s=w.getSelection().getRangeAt(0);
s.insertNode(w.document.createElement("hr"));
}
}
function insertlink(){
if (document.selection) {
w.focus();
var s = w.document.selection.createRange();
}
else {
w.focus();
var s = w.getSelection().getRangeAt(0);
}
var e=sx.event.target();
var ww=new wnd ();
ww.content.appendChild(document.createTextNode("請輸入連結位址;"));
var link=document.createElement("input");
link.type="text ";
link.size=20;
ww.content.appendChild(連結);
var b=document.createElement("button");
b.innerHTML="確定";
ww.content.appendChild(b);
b.onclick=function(){
if(sx.comm.ver=="ie"){
s.pasteHTML("; " s.htmlText ""); } else{ var a=w.document.createElement("a"); a.href=link.value; s.surroundContents(a); } sx.event.parseevent(ww.close,"click"); } ww. show(e); } 函數inserttable(){ if (document.selection) { w.focus(); var s = w.document.selection.createRange( ); } else { w.focus(); var s = w.getSelection().getRangeAt(0); }
var e=sx.event.target();
var ww=new wnd();
ww.content.appendChild(document.createTextNode("請輸入行數;"));
var tr=document.createElement("input");
tr.type="text";
tr.size=20;
ww.content.appendChild(tr);
ww. content.appendChild(document.createElement("br"));
ww.content.appendChild(document.createTextNode("請輸入列數;"));
var td=document.createElement("input" );
td.type="text";
td.size=20;
ww.content.appendChild(td);
ww.content.appendChild(document.createElement("br" ));
ww.content.appendChild(document.createTextNode("請輸入單元格高度;"));
var height=document.createElement("input");
height.type=" text";
高度.尺寸=20;
ww.content.appendChild(高度);
ww.content.appendChild(document.createElement("br"));
ww.content. appendChild(document.createTextNode("請輸入單元格寬度;"));
var width=document.createElement("input");
width.type="text";
寬度.大小= 20;
ww.content.appendChild(寬度);
ww.content.appendChild(document.createElement("br"));
var b=document.createElement("button");
b.innerHTML="確定";
ww.content.appendChild(b);
b.onclick=function(){
var l1=Number(tr.value);
var l2 =Number(td.value);
var h1=Number(高度.值);
var w1=Number(width.value);
ww.content.appendChild(document.createTextNode("請輸入單元格高度;"));
var t=document.createElement("table");
t.border="1";
var tb=document.createElement("tbody");
t.appendChild(tb);
for(var i=0;ivar tr1=document.createElement("tr");
for(var i1=0 ;i1var td1=document.createElement("td");
td1.innerHTML="";
sx.dom.setstyle(td1,{
寬度: w1 "px",
高度:h1 "px"
});
tr1.appendChild(td1);
}
tb.appendChild(tr1);
}
if(sx.comm.ver=="ie"){
s.pasteHTML(t.outerHTML);
}
else{
s.insertNode(t);
s .insertNode(document.createElement("br"));
}
sx.event.parseevent(ww.close,"click");
}
ww.show(e);
}
函數顏色(){
var e=sx.event.target();
if (document.selection) {
w.focus();
var s = w.document.selection.createRange();
}
else {
w.focus();
var s = w.getSelection().getRangeAt(0);
}
var ww=new wnd();
var 顏色= ["00","33","66","99","CC","FF"];
var cp=document. createElement("span");
sx.dom.setstyle(cp,{
顯示:"內聯區塊",
寬度:"10px",
高度:"10px",
邊距:"2px"
});
for(var i1=5;i1>=0;i1--){
for(var i2=5;i2>=0;i2- -){
for(var i3=5; i3>=0;i3--){
var cp1=cp.cloneNode(true);
cp1.style.backgroundColor="#" 顏色[ i1] 顏色[i2] 顏色[i3];
cp1.title="#" 顏色[i1] 顏色[i2] 顏色[i3];
cp1.onclick=function(){
if( sx.comm.ver=="ie"){
w.focus();
s.pasteHTML("" s.htmlText " ");
}
else{
var a=w.document.createElement("font");
a.color=this.title;
s.surroundContents(a);
}
sx.event.parseevent(ww.close,"click");
}
ww.content.appendChild(cp1);
}
}
}
ww.show(e);
}

關鍵是demo.html和edit.js裡的程式碼,core.js和advance.js裡的程式碼是我相容瀏覽器寫的,本想把它擴展一下做成一個完善的框架的,因為時間有限,沒辦法寫下去了。

本編輯器還沒有實現圖片和文件的上傳,需要因為伺服器技術,所以我沒辦法寫了,可以解釋一下讀者慢慢研究。
我打算先將web放放了,開始專心於vc的研究上,盡量能寫出一個像樣的程式出來,以後如果有時間我還可以繼續完善這個編輯器以及javascript兼容的框架。
恩,好好加油吧。
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn