如今網站開發越來越提倡用戶體驗，為用戶提供便利的工具也越來越多，而在線的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代碼，調整是比較痛苦的事情。

總結

以上是生活随笔為你收集整理的所见即所得网页html编辑器,在线所见即所得HTML编辑器的实现原理浅析的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。