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

更新時(shí)間：2015年04月25日 09:45:56 投稿：junjie

這篇文章主要介紹了在線所見即所得HTML編輯器的實(shí)現(xiàn)原理淺析,本文用初始化、打開編輯功能、獲取編輯器的內(nèi)容、增加樣式設(shè)置、再進(jìn)一步等步驟闡述在線編輯器的基本實(shí)現(xiàn)原理,需要的朋友可以參考下

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

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

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

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

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

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

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

//打開document對(duì)象，向其寫入初始化內(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對(duì)象編輯模式
doc.designMode = "on";
doc.close();

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

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

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

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

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

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

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

//統(tǒng)一的執(zhí)行命令方法
function execCmd(cmd, value){
    //doc對(duì)象的獲取參照上面的代碼
     //調(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對(duì)象的獲取參考上面的代碼
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);
    }
}

5、再進(jìn)一步。如今可以改變樣式了，如果編輯器有工具欄（這應(yīng)該是必然的），那么我們還想工具欄上的按鈕根據(jù)光標(biāo)所處位置的樣式，自動(dòng)處于突出或正常顯示。document的queryCommandState()方法又讓這種想法得以實(shí)現(xiàn)。

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

//doc對(duì)象的獲取參考上面的對(duì)面
//光標(biāo)處是否是粗體
var isBold = doc.queryCommandState('bold');
if(isBold){
//改變Bold按鈕的樣式
}
//當(dāng)然上面的代碼是可以合并的，這里只不過(guò)是一個(gè)示意

//下劃線
doc.queryCommandState('underline');
//斜體
doc.queryCommandState('italic');

本文只是為實(shí)現(xiàn)編輯器提供了簡(jiǎn)單的思路，其中的一些代碼是可以直接使用的。建議，想自己實(shí)現(xiàn)編輯器的朋友可以參考下ExtJS中的HTMLEditor代碼，既簡(jiǎn)單又比較清晰，可以在其上進(jìn)行擴(kuò)展。

最后提醒一點(diǎn)：一定要注意瀏覽器的兼容性問(wèn)題，并且不要等接近尾聲了再去測(cè)試兼容性，對(duì)于這么大量的JavaScript代碼，調(diào)整是比較痛苦的事情。