編輯
多功能文本編輯器(簡稱MTE)提供了類似微軟Word的編輯功能，很容易受到不會寫HTML，需要設置各種文本格式的用戶的喜愛。它的應用也越來越廣泛。壹開始只有IE瀏覽器支持，其他瀏覽器陸續跟進。在功能豐富性方面，IE更強。雖然沒有統壹的標準，但是對於最基本的功能，瀏覽器提供的API基本都是壹樣的，這就使得編寫跨瀏覽器的富文本編輯器成為可能。
在很多開發者看來，富文本編輯器的編寫是壹件非常神秘或者說非常復雜的事情。沒有什麽玄機。如果說復雜，那就是。但它的基本原理並不復雜，上手也不難。今天，我們的主題是講述基本原理，並壹步步演示壹個簡單的富文本編輯器的生成。這是我在D2分享的內容。臺上的演講效果不佳，我寫了下來，希望對有興趣的讀者有所幫助。
基本原理
編輯
這個原理太簡單了！對於支持富文本編輯的瀏覽器，其實就是將document的designMode屬性設置為on，然後執行document。execcommand ('commandname' [，uiflag [，value]])。命令名和值可以在MSDN和MDC上找到。它們是我們以各種格式創建的命令。例如，我們需要加粗字體和執行文檔。execcommand ('bold '，false)。很簡單吧？但值得註意的是，該命令通常是在選中文本後執行的，並對選中的文本進行格式化。對於未選中的文本，不同的瀏覽器有不同的方式來處理這個命令。比如IE可能會格式化光標中標簽的內容，而其他瀏覽器什麽都不做，這超出了本文的內容，不再贅述。同時需要註意的是，將UIFlag參數設置為true意味著顯示該命令觸發的任何用戶界面(如果有的話)，這在我們今天的教程中是false，value只在壹些commandName？只有中文，詳情請參考上面剛給的兩個鏈接。
為了不影響當前文檔，通常的做法是在頁面中嵌入壹個iframe元素，然後在這個iframe(通過iframe.contentWindow.document獲取)中操作文檔。
很簡單，不是嗎？我們做壹個吧。
簡單編輯
編輯
這個例子使用YUI。即使不熟悉也沒關系。我在這裏只使用它的DOM和壹些基本的跨平臺事件方法。
提高
在這裏，我想強調壹下不唐突，這個已經很久沒有提到了。我們的編輯器是對textarea元素的增強，也就是說，即使禁用了JavaScript，用戶也可以通過textarea編輯內容。
在這個例子中，我們將只計算textarea。我們使用壹個實例變量來保存工具欄中的項目。實例初始化放在壹個名為render的方法中。這壹步的頁面和代碼見步驟1。
創建iframe並替換textarea。
建立壹個架子，就像我之前說的，建立壹個iframe。編輯器的所有操作都在iframe的文檔中執行。並隱藏文本區。正如您在步驟2中看到的，我們已經有了壹個iframe，但是我們不能輸入任何內容。很正常。我們沒有打開它的設計模式。
打開設計模式
這壹步涉及很多東西，也是關鍵。我們將創建壹個方法來獲取iframe的文檔，並通過程序向iframe寫入壹個空白頁面，而不是使用外部blank.html。我們使用壹個類屬性YAHOO.realazy.RTE.htmlContent來保存空頁面的html。壹切準備就緒後，我們可以開始設計模式。有關頁面和代碼，請參見步驟3。看，我們已經可以在iframe中輸入內容了。
構建工具欄
我們需要操作工具欄！只有這樣才能控制iframe中的內容，才能稱之為編輯器。這裏不打算實現太多的功能，只選擇字形、粗體、斜體、下劃線、左、中、右、超鏈接、插圖為例。對於跨平臺，Mozilla Midas規範是壹個很好的參考。好的，請看第四步。我們的工具欄出來了，雖然很醜。同時我用CSS對iframe的寬度做了壹些調整。
向工具欄添加項目
嗯，工具欄出來了，編輯器看起來“人對狗”。如果妳很興奮，那就不行了...不出所料。然後，我們將壹些事件綁定到工具欄，以便編輯器內容可以響應工具欄。在這壹步中，我們用另壹個層密封execCommand。如前所述，我們可以將UIFlag放在上面，並使其始終為false。好吧，哪裏有代碼，哪裏就有真相。請參見步驟5。如果您正在使用IE，請先暫時切換到另壹個瀏覽器。看，工具欄生效了！
解決IE的問題
好吧，如果妳不聽我的建議，還用IE，妳會發現除了字體和字號，妳什麽都用不了。為什麽？如果觀察的話，有沒有發現其他瀏覽器選中文本後，點擊工具欄上的項目，選中的文本還是選中的嗎？而IE，當妳點擊工具欄的時候，選中的文本馬上就失去了選中狀態，所以他們失敗了。因此，如果我們能夠確保單擊工具欄文本保持選中狀態，就可以解決IE的問題。
微軟給HTML標簽壹個奇怪的屬性，不可選擇。只要設置為On，就不會轉移到被點擊的元素，從而保證了文本的選中狀態。
請參見步驟6。這也是解決IE頭疼問題的關鍵。我曾經花了很多心思。