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

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

複製代碼 代碼如下:

字型：
宋體
黑體
楷體
仿宋
隸書
幼圓
新宋體
細明體
Arial
Arial Black
Arial Narrow
Bradley Hand ITC
Brush Script MT
Century Gothic
Comic Sans MS
Courier
Courier New
MS Sans Serif
Script
System
Times New Roman
Viner Hand ITC
Verdana
Wide Latin
Wingdings

字號：
1
2
3
4
5
6
7

顏色
加粗
傾斜
居左
居中
居右

插入影視和圖片
上傳檔案
插入表格
插入水平線
插入超連結

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兼容的框架。
恩，好好加油吧。