富文本編輯器，rich text editor, 簡稱 rte, 它提供類似于 microsoft word 的編輯功能，容易被不會編寫 html 的用戶并需要設置各種文本格式的用戶所喜愛。它的應用也越來越廣泛。最先只有 ie 瀏覽器支持，其它瀏覽器相繼跟進，在功能的豐富性來說，還是 ie 強些。雖然沒有一個統(tǒng)一的標準，但對于最基本的功能，各瀏覽器提供的 api 基本一致，從而使編寫一個跨瀏覽器的富文本編輯器成為可能。[br][br]　　在很多開發(fā)者看來，富文本編輯器的編寫是一件很神秘或者復雜的事情。神秘倒沒有，復雜的話，確實如此。但是它的基本原理并不復雜，入門也不難。今天我們的主題是講述基本原理，并逐步演示一個簡單富文本編輯器的產生。這是我在 d2 上的一個分享內容，在臺上的演講效果不佳，固寫下來，希望能夠對感興趣的讀者有所幫助。[br][br]　　富文本編輯器的基本原理[br][br]　　這個原理實在是太簡單了！對于支持富文本編輯的瀏覽器來說，其實就是設置 document 的 designmode 屬性為 on 后，再通過執(zhí)行 document.execcommand('commandname'[, uiflag[, value]]) 即可。commandname 和 value 可以在 msdn 上和mdc 上找到，它們就是我們創(chuàng)建各種格式的命令，比方說，我們要加粗字體，執(zhí)行 document.execcommand('bold', false) 即可。很簡單是吧？但是值得注意的是，通常是選中了文本后才執(zhí)行命令，被選中的文本才被格式化。對于未選中的文本進行這個命令，各瀏覽器有不同的處理方式，比方 ie 可能是對位于光標中的標簽內容進行格式化，而其它瀏覽器不做任何處理，這超出本文的內容，不細述。同時需要注意的是，uiflag 這個參數(shù)設置為 true 表示 display any user interface triggered by the command (if any), 在我們今天的教程中都是 false, 而 value 也只在某些 commandname 中才有，具體參考以上剛給出的兩個鏈接。[br][br]　　為了不影響當前 document, 通常的做法是在頁面中嵌入一個 iframe 元素，然后對這個 iframe 內的 document（通過 iframe.contentwindow.document 獲得）進行操作。[br][br]　　十分簡單，是吧？下面我們來動手做一個。[br][br]　　編寫一個簡單的富文本編輯器[br][br]　　這個例子使用了 yui. 即使你對它不是很熟悉也沒有關系，我在這里只使用了它的 dom 和 event 的一些跨平臺基本方法。[br][br]　　搭架[br][br]　　在此強調一下很久未曾提及的 unobtrusive. 我們的編輯器是對 textarea 元素的一個增強（enhencement），就是說，即使 javascript 被禁用了，用戶還可以通過 textarea 編輯內容。[br][br]　　在這個例子中，我們將使用 yahoo.realazy 的命名空間，在之下實現(xiàn)一個 rte 的類。我們今天的編輯器很簡單，因此構造器(constructor) 的參數(shù)也只有 textarea 一個。我們使用一個實例變量來保存工具條的各個項目。實例初始化放到一個叫 render 的方法中。這一步的頁面和代碼見第 1 步。[br][br]　　創(chuàng)建 iframe 并替換 textarea[br][br]　　搭好架子，正如我在前面所說，建立一個 iframe, 編輯器的所有操作都在 iframe 的 document 內執(zhí)行。并且把 textarea 隱藏起來。從第 2 步中可以看到，我們已經有了一個 iframe, 但不能輸入任何東西，很正常，我們沒有打開它的 designmode 嘛。[br][br]　　開啟 designmode[br][br]　　這一步涉及的東西挺多，也是關鍵。我們會創(chuàng)建獲取 iframe 的 document 的方法，并通過程序的方式向 iframe 寫入空頁而非使用一個外接的 blank.html. 我們使用一個類屬性 yahoo.realazy.rte.htmlcontent 來保存空頁的 html. 在準備好一切后，就可以開啟 designmode 了。頁面和代碼詳見第 3 步?？?，我們已經可以在 iframe 里輸入東西了。[br][br]　　構建工具條[br][br]　　我們需要操作的工具條！這樣才可以控制 iframe 里的內容，才能稱之為編輯器。在此我并不打算實現(xiàn)太多的功能，只是選擇字形、字號、加粗、斜體、下劃線、居左、居中、居右、超鏈接和插圖作為示例。對于跨平臺，mozilla midas specification 是不錯的參考。ok, 請看第 4 步，我們的工具條出來了，雖然很丑。我同時用 css 對 iframe 的寬度做出了一些調整。[br][br]　　給工具條加上事件[br][br]　　嗯，工具條出來了，編輯器看起來也“人模狗樣”了，你興奮的點啊點，沒什么效果……意料中嘛。我們接著給工具條綁定一些事件，讓編輯器內容能夠響應工具條。在這一步，我們把 execcommand 再封一層，前面說過，我們用不上 uiflag，讓它永遠是 false 好了。好，有代碼就有真相，請看第 5 步。如果是正使用 ie, 請先暫時轉移到其它瀏覽器?？吹搅税?，工具條生效了！[br][br]　　解決 ie 的問題[br][br]　　well, 如果你沒有聽我的勸告，依然使用 ie, 你會發(fā)現(xiàn)除了字型和字號其它的都不能用。為什么呢？你觀察一下，有沒有發(fā)現(xiàn)，其它瀏覽器選擇文本后，再點擊工具條上的項目，被選中的文本是否依然選中的？而 ie 呢，在點擊工具條時，選中的文本馬上失去選中的狀態(tài)，所以它們就失敗了。所以，如果我們能夠保證點擊工具條文本保持選中狀態(tài)，就可以解決 ie 的問題了。[br][br]　　microsoft 給 html 標簽一個很奇怪的屬性 unselectable, 只要設置為 on, 焦點不會轉移到點擊的元素上，從而保證文本的選中狀態(tài)。[br][br]　　請看第 6 步。這也是解決 ie 頭痛問題的關鍵所在。我曾經在這上面費了很大腦筋。[br][br]　　高級主題展望[br][br]　　good, 看看我們現(xiàn)在的代碼，224 行。相比其它動輒上萬行的編輯器，你可能會覺得不可思議。因為我們這個最基本的編輯器，連 selection 都沒有用到。很多很酷的效果，比如 google doc 里能夠動態(tài)改變鏈接文本，使用頁內層而非彈出的 prompt 來操作等高級功能，基本上都要用到 textrange(ie) 或者 range(w3c). 要命的是這兩個東西互補兼容，只是相似而已。入門推薦看ppk 的 introduction to range.[br][br]　　在此我們就不深入了，等我有時間我會總結一些奇技淫巧（嗚呼，前端開發(fā)需要的奇技淫巧太多了，這不是好事情）出來。