自己寫的兼容ie和ff的線上文字編輯器類似ewebeditor

怎麼說呢，剛包完夜吧，應該很累了，但現在仍有力氣敲打著這些字符，看來我還沒到此為止。
廢話少說，最近寫了個在線的編輯器，類似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
： 




複製代碼

代碼如下：

");
}其他{
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兼容的框架。
恩，好好加油吧。

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