在線所見即所得HTML編輯器的實現(xiàn)原理淺析

2019-11-20 12:36:39

字體：大中小

供稿：網(wǎng)友

如今網(wǎng)站開發(fā)越來越提倡用戶體驗，為用戶提供便利的工具也越來越多，而在線的HTML內(nèi)容編輯器應(yīng)該算是其中比較“古老”的一個了。功能簡單的可以為用戶提供文本的樣式控制，例如文字的顏色、字體大小等；而功能復(fù)雜的甚至可以提供類似Word一樣的強(qiáng)大功能。雖然現(xiàn)在各種開源的編輯器非常多，但是真正好用的并不多，所以它們改進(jìn)工作也一直在進(jìn)行中。

如今網(wǎng)上多數(shù)的編輯器都有很強(qiáng)大的功能，相對而言，在使用中也需要很多的配置，當(dāng)然代碼也自然會比較“臃腫”。如果我們并不需要功能那么強(qiáng)大的編輯器，那么可以自己實現(xiàn)一個，因為代碼并不復(fù)雜。下面是一點個人的經(jīng)驗，僅供參考（以ExtJS的HTMLEditor為例）。

1、初始化。當(dāng)頁面加載完畢后，向頁面添加一個IFrame（可選）。這里要注意的是，要判斷頁面的狀態(tài)，要等頁面完全加載完畢后再進(jìn)行操作，防止出現(xiàn)找不到某些元素的錯誤。

2、打開編輯功能。將IFrame設(shè)為可以編輯（下面代碼來自ExtJS的HTMLEditor）：

復(fù)制代碼代碼如下:

// 獲取iframe的window對象
getWin : function(){
return Ext.isIE ? this.iframe.contentWindow : window.frames[this.iframe.name];
},

//獲取iframe的document對象
getDoc : function(){
return Ext.isIE ? this.getWin().document : (this.iframe.contentDocument || this.getWin().document);
},

//打開document對象，向其寫入初始化內(nèi)容，以兼容FireFox
doc = this.getDoc();
doc.open();
doc.write('<html><head><mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">body{border:0;margin:0;padding:3px;height:98%;cursor:text;}</style></head><body></body></html>');
//打開document對象編輯模式
doc.designMode = "on";
doc.close();

這樣就可以向這個簡單那的編輯器中寫入內(nèi)容了。

3、獲取編輯器的內(nèi)容，代碼如下：

復(fù)制代碼代碼如下:

//獲取編輯器的body對象
var body = doc.body || doc.documentElement;
//獲取編輯器的內(nèi)容
var content = body.innerHTML;
//對內(nèi)容進(jìn)行處理，例如替換其中的某些特殊字符等等
//Some code

//返回內(nèi)容
return content;

4、增加樣式設(shè)置。上面的編輯器雖然實現(xiàn)了基本功能，但是實在是有些太簡單了，應(yīng)該增加些簡單的樣式實現(xiàn)。document的execCommand方法使這種想法成為可能。

復(fù)制代碼代碼如下:

//統(tǒng)一的執(zhí)行命令方法
function execCmd(cmd, value){
    //doc對象的獲取參照上面的代碼
     //調(diào)用execCommand方法執(zhí)行命令
    doc.execCommand(cmd, false, value === undefined ? null : value);
};

//將選中字體變?yōu)楹隗w，Ctrl-B
execCmd('bold');
//加下劃線，Ctrl-U
execCmd('underline');
//變?yōu)樾斌w，Ctrl-I
execCmd('italic');
//設(shè)置文字的顏色
execCmd('forecolor', Ext.isSafari || Ext.isIE ? '#'+color : color);
//在光標(biāo)處插入一段內(nèi)容
function insertAtCursor(text){
//win對象的獲取參考上面的代碼
if(Ext.isIE){
      win.focus();
      var r = doc.selection.createRange();
      if(r){
        r.collapse(true);
        r.pasteHTML(text);      }
    }else if(Ext.isGecko || Ext.isOpera){
      win.focus();
      execCmd('InsertHTML', text);
    }else if(Ext.isSafari){
      execCmd('InsertText', text);
    }
}