HTML在線編輯器實際上是什么

其實有好幾種實現方式，目前用得最多、兼容性最好的還是iframe方式。

只有這個空iframe是不行的，還要用Javascript把它設成可編輯：

換而言之，HTML在線編輯器就是一個可編輯的iframe。

加粗、斜體、下劃線、加鏈接等功能如何實現

瀏覽器已經提供了實現這些功能的接口execCommand：

這三個參數的意思分別是：

• 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就可以了：

然而，IE下的innerHTML非常不標準：標簽名是大寫的，屬性沒有引號包起來，單標簽也沒有結束符……即便是Firefox下獲取的代碼，也有少量瑕疵。這個時候就要用正則表達式對代碼進行標準化處理。

總結

不多說了，做一遍HTML編輯器，你就會知道CKEditor是多么強大。