最近兩周一直都在開發后台wcms系統的文本編輯器。在開發的過程中，感覺到開發富文本編輯器還是能學到不少東西的，接下來我會說說我個人是怎么開發的吧。因為我的編輯器要兼容自己的后台，所以修改了一些瀏覽器自身的方法。
開發富文本編輯器主要用到了document.execCommand( command, showUI, value )這個方法。
command：要執行的命令的名稱 showUI：boolean是否向用戶顯示命令特定的對話框或消息框 value類型：string要使用該命令分配的值。
關於這個方法更加詳細的說明可以google進行搜索。
我們都知道在textarea下我們可以直接輸入文本，但是怎么樣能顯示我們編輯文本后的效果呢。我們通常是在div與iframe中編輯。要想在div中編輯，設置其contentEditable = "true"。若是在iframe中編輯，可以用designMode="on"。通常人們都是用ifame，這樣做當然有它的道理。我在這邊說下我個人的看法，有不對的希望大家指出。
為什么要用iframe來開發富文本編輯器是基於多方面考慮的。以下是我個人的看法：
1.用iframe可以解決瀏覽器的兼容性問題。在iframe下可以很方便的獲取選中的文字等等。
2.在iframe下編輯可以實現所見即所得的效果。相當於是iframe下顯示的是瀏覽器解析源碼后的內容。
3.在iframe下是直接在iframe下的document中進行操作並不會影響到當前文檔的document。
說說我在開發中的體會吧， 因為我們的新聞頁的源碼內容是寫在<textarea>innerHTML中，如果要獲取源碼解析后的內容直接取它的value就行。如果想讓<!-- -->這種編碼格式也顯示的話，需要將<!--和-->解析成<和--gt;。還有就是在iframe中會將<br/>轉成<br>，所以在最后上傳保存的時候需要將它轉成<br/>。
因為在開發過程中需要將源碼粘貼到iframe中，因為iframe就是一種所見即所得的編輯器，會自動給你的文本添加標簽來展現當前的內容。如果這樣的話iframe會給源代碼添加上一些自己不需要的標簽，為了解決這個問題，我給iframe的document添加了一個paste事件的，在發生粘貼事件的時候在body內建立了一個textarea元素，然后給textarea添加一個focus來將焦點設置在textarea中，這樣內容就粘貼在textarea中了。就不會產生我們不需要的內容了。
因為要捕捉瀏覽器的ctrl+A事件來獲取當前全選的文本內容，獲取當前iframe全選文字的方法是document.getElementById("iframe").contentWindow.document.getSelection().toString();
我需要修改瀏覽器自帶的tab事件來進行文本的對齊。在這里我用到了inserthtml這個command，即execCommand("inserthtml", false, "")。在打一個tab鍵的時候給頁面添加空格。這里就出現問題了，我得加七個空格才能實現文本的對齊。那怎么解決這個問題呢，后來我查找資料發現了 它可以代表一個中文全角空格，通過它我解決了這個問題。
當然還有源碼和當前文本編輯器互相顯示，也就是iframe和textarea相互顯示就行了。
就寫到這里吧。代碼我就不粘貼了，也就是給大家提供思路，歡迎拍磚。