在線所見即所得HTML編輯器的實作原理淺析_javascript技巧

如今網站開發越來越提倡使用者體驗，提供使用者便利的工具也越來越多，而線上的HTML內容編輯器應該算是其中比較「古老」的一個了。功能簡單的可以為使用者提供文字的樣式控制，例如文字的顏色、字體大小等；而功能複雜的甚至可以提供類似Word一樣的強大功能。雖然現在各種開源的編輯器非常多，但是真正好用的並不多，所以它們改進工作也一直在進行中。

如今網路上多數的編輯器都有很強大的功能，相對而言，在使用上也需要很多的配置，當然程式碼也自然會比較「臃腫」。如果我們並不需要功能那麼強大的編輯器，那麼可以自己實作一個，因為程式碼並不複雜。以下是一點個人的經驗，僅供參考（以ExtJS的HTMLEditor為例）。

1、初始化。當頁面載入完畢後，向頁面新增一個IFrame（可選）。這裡要注意的是，要判斷頁面的狀態，要等頁面完全載入完畢後再進行操作，以防止找不到某些元素的錯誤。

2、開啟編輯功能。將IFrame設為可以編輯（下面程式碼來自ExtJS的HTMLEditor）：

複製程式碼 程式碼如下:

// 取得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對象，向其寫入初始化內容，以相容FireFox
doc = this.getDoc();
doc.open();
doc.write('

');
//開啟document物件編輯模式
 doc.designMode = "on";
doc.close();

這樣就可以寫入內容給這個簡單那的編輯器了。
 
3.取得編輯器的內容，程式碼如下：

複製程式碼 程式碼如下:

//取得編輯器的body物件
var body = doc.body || doc.documentElement;
//取得編輯器的內容
var content = body.innerHTML;
//對內容進行處理，例如替換其中的某些特殊字元等等
//Some code

//返回內容
return content;

 4、增加樣式設定。上面的編輯器雖然實現了基本功能，但實在是有些太簡單了，應該要增加些簡單的樣式實作。 document的execCommand方法使這種想法成為可能。

複製程式碼 程式碼如下:

//統一的執行指令方法
function execCmd(cmd, value){
    //doc物件的取得參考上面的程式碼
     //呼叫execCommand方法執行指令
    doc.execCommand(cmd, false, value === undefined ? null : value);
};

//將選取字體變成黑體，Ctrl-B
execCmd('bold');
//加底線，Ctrl-U
execCmd('underline');
//變成斜體，Ctrl-I
execCmd('italic');
//設定文字的顏色
execCmd('forecolor', Ext.isSafari || Ext.isIE ? '#' color : color);
//在遊標處插入一段內容
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);
    }
  }

5、再進一步。如今可以改變樣式了，如果編輯器有工具列（這應該是必然的），那麼我們還想工具列上的按鈕根據遊標所處位置的樣式，自動處於突出或正常顯示。 document的queryCommandState()方法又讓這個想法得以實現。

複製程式碼 程式碼如下:

//doc物件的取得參考上面的對面
//遊標處是否為粗體
var isBold = doc.queryCommandState('bold');
if(isBold){
  //改變Bold按鈕的樣式
}
//當然上面的程式碼是可以合併的，這裡只不過是一個示意

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

本文只是為實作編輯器提供了簡單的思路，其中的一些程式碼是可以直接使用的。建議，想自己實作編輯器的朋友可以參考下ExtJS中的HTMLEditor程式碼，既簡單又比較清晰，可以在其上進行擴充。

最後提醒一點：一定要注意瀏覽器的相容性問題，並且不要等接近尾聲了再去測試相容性，對於這麼大量的JavaScript程式碼，調整是比較痛苦的事情。