HTML在線編輯器實際上是什么
其實有好幾種實現方式，目前用得最多、兼容性最好的還是iframe方式。
iframe src="" frameborder="0">/iframe>
只有這個空iframe是不行的，還要用Javascript把它設成可編輯：
iframe.contentWindow.document.designMode = "on";
iframe.contentWindow.document.contentEditable = true;
換而言之，HTML在線編輯器就是一個可編輯的iframe。
加粗、斜體、下劃線、加鏈接等功能如何實現
瀏覽器已經提供了實現這些功能的接口execCommand：
iframe.contentWindow.document.execCommand(cmd, isDefaultShowUI, value);
這三個參數的意思分別是：
- cmd：命令文本，有好多，IE的可以看這里，Firefox的可以看這里。
- isDefaultShowUI：是否默認顯示交互界面，比如加鏈接的時候，可以通過界面填入鏈接。不過這個參數存在兼容性問題，一般設為false將其禁用，并另外制作交互界面。
- value：傳入的值，某些命令可以省略。
execCommand的問題是，生成的代碼可能不標準，比如在IE下，文字加粗用的是b標簽而不是strong標簽。
交互問題
用戶不可能總是在編輯器中輸入，比如加粗、插入圖片等功能是通過按鈕操作的。假設用戶要加粗一段選中的文字，當他按了加粗按鈕后，選區以及焦點也會跟著跑到那去，因此選區（選中的文字）丟失，操作也就無法完成；同理，插入圖片時插入位置也會丟失。
也就是說，要保存最后出現在編輯器中的選區。我采取的方案是，當焦點在編輯器內的時候，用一個定時器（setInterval）定時獲取當前選區。選區編程平時很少用，做起來也有很多兼容性問題，主要是參考微軟的MSDN（TextRange ControlRange）和Mozilla的MDC（Range Selection）了。
回車問題
在IE下，按回車是換段落，生成p>，但在Firefox下是換行，生成的是br>。要解決這個問題，就要監聽keydown事件，如果檢測到按鍵是回車，就插入“p>/p>”。
獲取標準的代碼
如何獲取編輯的內容呢？這個問題很簡單，只要獲取iframe頁面body中的innerHTML就可以了：
var content = iframe.contentWindow.document.body.innerHTML;
然而，IE下的innerHTML非常不標準：標簽名是大寫的，屬性沒有引號包起來，單標簽也沒有結束符……即便是Firefox下獲取的代碼，也有少量瑕疵。這個時候就要用正則表達式對代碼進行標準化處理。
總結
不多說了，做一遍HTML編輯器，你就會知道CKEditor是多么強大。
