富文本編輯器

富文本編輯器，Multi-function Text Editor, 簡稱 MTE, 它提供類似於 Microsoft Word 的編輯功能，容易被不會編寫 HTML 的用户並需要設置各種文本格式的用户所喜愛。它的應用也越來越廣泛。最先只有 IE 瀏覽器支持，其它瀏覽器相繼跟進，在功能的豐富性來説，還是 IE 強些。雖然沒有一個統一的標準，但對於最基本的功能，各瀏覽器提供的 API 基本一致，從而使編寫一個跨瀏覽器的富文本編輯器成為可能。

在很多開發者看來，富文本編輯器的編寫是一件很神秘或者複雜的事情。神秘倒沒有，複雜的話，確實如此。但是它的基本原理並不複雜，入門也不難。今天我們的主題是講述基本原理，並逐步演示一個簡單富文本編輯器的產生。這是我在D2上的一個分享內容，在台上的演講效果不佳，故寫下來，希望能夠對感興趣的讀者有所幫助。

這個原理實在是太簡單了！對於支持富文本編輯的瀏覽器來説，其實就是設置 document 的 designMode 屬性為 on 後，再通過執行 document.execCommand('commandName'[, UIFlag[, value]]) 即可。commandName 和 value 可以在MSDN 上和MDC 上找到，它們就是我們創建各種格式的命令，比方説，我們要加粗字體，執行 document.execCommand('bold', false) 即可。很簡單是吧？但是值得注意的是，通常是選中了文本後才執行命令，被選中的文本才被格式化。對於未選中的文本進行這個命令，各瀏覽器有不同的處理方式，比方 IE 可能是對位於光標中的標籤內容進行格式化，而其它瀏覽器不做任何處理，這超出本文的內容，不細述。同時需要注意的是，UIFlag 這個參數設置為 true 表示 display any user interface triggered by the command (if any), 在我們今天的教程中都是 false, 而 value 也只在某些 commandName 中才有，具體參考以上剛給出的兩個鏈接。

為了不影響當前 document, 通常的做法是在頁面中嵌入一個 iframe 元素，然後對這個 iframe 內的 document（通過 iframe.contentWindow.document 獲得）進行操作。

十分簡單，是吧？下面我們來動手做一個。

這個例子使用了YUI. 即使你對它不是很熟悉也沒有關係，我在這裏只使用了它的 DOM 和 Event 的一些跨平台基本方法。

搭架

在此強調一下很久未曾提及的 unobtrusive. 我們的編輯器是對 textarea 元素的一個增強（enhencement），就是説，即使 JavaScript 被禁用了，用户還可以通過 textarea 編輯內容。

在這個例子中，我們將數也只有 textarea 一個。我們使用一個實例變量來保存工具條的各個項目。實例初始化放到一個叫 render 的方法中。這一步的頁面和代碼見第 1 步。

創建 iframe 並替換 textarea

搭好架子，正如我在前面所説，建立一個 iframe, 編輯器的所有操作都在 iframe 的 document 內執行。並且把 textarea 隱藏起來。從第 2 步中可以看到，我們已經有了一個 iframe, 但不能輸入任何東西，很正常，我們沒有打開它的 designMode 嘛。

開啓 designMode

這一步涉及的東西挺多，也是關鍵。我們會創建獲取 iframe 的 document 的方法，並通過程序的方式向 iframe 寫入空頁而非使用一個外接的 blank.html. 我們使用一個類屬性 YAHOO.realazy.RTE.htmlContent 來保存空頁的 html. 在準備好一切後，就可以開啓 designMode 了。頁面和代碼詳見第 3 步。看，我們已經可以在 iframe 裏輸入東西了。

構建工具條

我們需要操作的工具條！這樣才可以控制 iframe 裏的內容，才能稱之為編輯器。在此我並不打算實現太多的功能，只是選擇字形、加粗、斜體、下劃線、居左、居中、居右、超鏈接和插圖作為示例。對於跨平台，Mozilla Midas Specification是不錯的參考。ok, 請看第 4 步，我們的工具條出來了，雖然很醜。我同時用 CSS 對 iframe 的寬度做出了一些調整。

給工具條加件

嗯，工具條出來了，編輯器看起來也“人模狗樣”了，你興奮的點啊點，沒什麼效果……意料中嘛。我們接着給工具條綁定一些事件，讓編輯器內容能夠響應工具條。在這一步，我們把 execCommand 再封一層，前面説過，我們上 UIFlag，讓它永遠是 false 好了。好，有代碼就有真相，請看第 5 步。如果是正使用 IE, 請先暫時轉移到其它瀏覽器。看到了吧，工具條生效了！

解決 IE 的問題

well, 如果你沒有聽我的勸告，依然使用 IE, 你會發現除了字型和字號其它的都不能用。為什麼呢？你觀察一下有發現，其它瀏覽器選擇文本後，再點擊工具條上的項目，被選中的文本是否依然選中的？而 IE 呢，在點擊工具條時，選中的文本馬上失去選中的狀態，所以它們就失敗了。所以，如果我們能夠保證點擊工具條文本保持選中狀態，就可IE的問題了。

Microsoft 給 HTML 標籤一個很奇怪的屬性 unselectable, 只要設置為On不會轉移到點擊的元素上，從而保證文本的選中狀態。

請看第 6 步。這也是解決 IE 頭痛問題的關鍵所在。我曾經在這上面費了很大腦筋。

good, 看看我們的代碼，224 行。相比其它動輒上萬行的編輯器，你可能會覺得不可思議。因為我們這個最基本的編輯器，連 selection 都沒有用到。很多很酷的效果，比如 Google Doc 裏能夠動態改變鏈接文本，使用頁內層而非彈出的 prompt 來操作等高級功能，基本上都要用到 TextRange(IE) 或者 Range(W3C). 要命的是這兩個東西互不兼容，只是相似而已。入門推薦看PPK 的Introduction to Range.

通過RichTextBox for Silverlight控件可以查看、編輯和保存THML或RTF格式的文檔。可以實現豐富的格式設置，自動換行，HTML和RTF文件導入，插入表格、圖片和註釋等操作。

C1RichTextBox 為 Silverlight 應用程序提供了功能最為完整的富文本編輯器。可以加載、編輯和保存RTF或HTML格式的文檔，並支持豐富的格式設置、自動折行、HTML或RTF文檔的導入/導出、表格、圖片和註釋等操作。

Javascript富文本編輯器使我們添加、編輯網站中的文章更加方便和容易。這些富文本編輯器提供了所見即所得(What You See Is What You Get - WYSIWYG)的功能，可以像編輯word文檔一樣，方便地編輯網站中文章，常用於內容管理系統和博客系統等。下面推薦幾個免費的：

MarkitUp - jQuery

一個輕量級的、可定製的和靈活的富文本編輯器，常用在CMS、Blog、論壇等網站上。markItUp不是一個所見即所得的編輯器，支持一些常用快車鍵和常用的瀏覽器。

jWYSIWYG - jQuery

jWYSIWYG是比較常用的Jquery所見即所得編輯器，提供了html代碼編輯功能、文字編輯功能，圖片連接功能，從而保證了jWYSIWYG的簡單的特性。

Lightweight RTE- jQuery

Lightweight RTE是一個非常簡單的Jquery富文本編輯器，體積只有7kb。提供了一些基本的文字格式化操作功能。

HTMLBox - jQuery

HTMLBox跨瀏覽器、交互性非常好、開源的Jquery富文本編輯器，在Mozilla Firefox, Inrernet Explorer, Opera, Netscape and Safari等常用瀏覽器下測試通過。此編輯器用户手冊可以幫住你非常容易地把此編輯器整合到自己的Web系統中。

Small Rich Text Editor - jQuery

D Small Rich Text Editor使用了AjaxFileUpload 插件實現圖片上傳功能。 ^[1]