富文本編輯器，Rich Text Editor, 簡稱 RTE, 是一種可內嵌於瀏覽器，所見即所得的文本編輯器。
富文本編輯器不同於文本編輯器，程式設計師可到網上下載免費的富文本編輯器內嵌於自己的網站或程式里（當然付費的功能會更強大些），方便用戶編輯文章或信息。比較好的文本編輯器有kindeditor,fckeditor等。
基本介紹
- 中文名：富文本編輯器
- 外文名：Rich Text Editor
- 簡稱： RTE
- 類別：可內嵌於瀏覽器的文本編輯器
- 優勢：功能的豐富性
原理實踐,基本原理,簡單編輯,主題展望,JS,
原理實踐
富文本編輯器，Rich Text Editor, 簡稱 RTE, 它提供類似於 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.
C1RichTextBox
通過RichTextBox for Silverlight控制項可以查看、編輯和保存THML或RTF格式的文檔。可以實現豐富的格式設定，自動換行，HTML和RTF檔案導入，插入表格、圖片和注釋等操作。
C1RichTextBox 為 Silverlight 應用程式提供了功能最為完整的富文本編輯器。可以載入、編輯和保存RTF或HTML格式的文檔，並支持豐富的格式設定、自動折行、HTML或RTF文檔的導入/導出、表格、圖片和注釋等操作。
JS
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 外掛程式實現圖片上傳功能。
