富文本編輯器

富文本編輯器，Rich Text Editor, 簡稱 RTE, 是一種可內嵌於瀏覽器，所見即所得的文本編輯器。它提供相似於 好比谷歌、火狐效果都很是不錯，在功能的豐富性來講，仍是 IE 強些（但IE的六、七、八、9幾個版本就足夠搞死開發者了）。
富文本編輯器不一樣於文本編輯器，程序員可到網上下載免費的富文本編輯器內嵌於本身的網站或程序裏（固然付費的功能會更強大些），方便用戶編輯文章或信息。比較好的文本編輯器有kindeditor,fckeditor等，百度推出的開源富文本編輯器UEditor算是其中的後起之秀。

原理實踐

富文本編輯器
富文本編輯器
富文本編輯器，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的簡單的特性。

摺疊LightweightRTE-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 插件實現圖片上傳功能。