提示：最新版wangEditor請參見：wangEditor.github.io 或者 https://github.com/wangfupeng1988/wangEditor
1. 前言
（下載源碼、使用說明、demo，請參見：https://github.com/wangfupeng1988/wangEditor）
前段時間做過一個基於bootstrap的富文本編輯器——wangEditor，並發布到github上（https://github.com/wangfupeng1988/wangEditor），在博客園寫了篇文章（http://www.cnblogs.com/wangfupeng1988/p/4088229.html）也受到了不少關注。
之所以有這次重構，是因為以下原因。
- 第一，bootstrap。做一個小小的web富文本編輯器，就依賴於bootstrap，未免有點小題大做。當時依賴於bootstrap是為了省去我繪制按鈕、下拉框和彈出框的時間，有些偷懶。因此，本次重構棄用bootstrap。
- 第二，瀏覽器限制。因為本身用了bootstrap，就只考慮了兼容bootstrap的瀏覽器，IE低版本瀏覽器就沒有考慮，這是一個弊端。因此，本次重構，兼容所有瀏覽器。
- 第三，有細心的朋友看了我的代碼，對我提出了一些建議（雖然言辭上有些不大善意），他說“代碼不夠優雅”，其實我的理解就是擴展性差。因此，本次重構，充分考慮了擴展性。可允許用戶自定義菜單。
不過，重構后的wangEditor依然很輕量化，一個十幾KB的js文件，一個3KB的css文件，搞定！使用起來也非常簡單。一行代碼搞定：
//其實返回的 $editor 就是一個jquery對象，可以進行任何jquery的操作，例如 $editor.html() ， $editor.text() var $editor = $('#txtDiv').wangEditor();
2. 棄用bootstrap，自己開發樣式和效果
棄用bootstrap后，不得不自己開發樣式和效果。
第一，菜單的樣式和排版其實非常簡單，大家看到效果之后應該都明白。我這里依然采用給了fontawesome作為icon字體庫，不明白的可以看看《請用fontAwesome代替網頁icon小圖標》。
第二，自己制作了一個tooltip的效果，即鼠標放在按鈕上之后，彈出小框提示title，如圖：
第三，屬於下拉框類型的按鈕，右側會顯示一個向下的箭頭，如
。點擊之后，會彈出下拉框，blur（失去焦點）之后，下拉框隱藏。
第四，自己制作了彈出框效果，彈出框顯示后，下方有遮罩層隱藏頁面所有內容，不允許點擊。
3. 兼容IE低版本瀏覽器
首先，非常感謝fontAwesome兼容了IE低版本瀏覽器，否則我就得再自己去繪制icon圖標，那可就麻煩大了。
樣式上和效果上兼容IE低版本應該沒什么問題，大不了支持html5的可以顯示圓角，IE低版本不顯示圓角，這個影響不大，也不影響使用。
最主要的兼容在於，IE低版本實現“選擇”和“范圍”的技術，與W3C不一致，它有自己的一套邏輯。不了解這塊的朋友，可以想想IE在事件處理上，無論是綁定事件還是event參數的處理，都和W3C不一樣，很是討厭！
為了實現兼容，就必須要全面考慮兩者對“選擇”和“范圍”的不同實現方法，做瀏覽器兼容性測試，然后根據不同的情況，編寫不同的代碼。舉個例子：
var supportRange = typeof document.createRange === 'function'; if(supportRange){ //w3c selection = document.getSelection(); selection.removeAllRanges(); selection.addRange(currentRange); }else{ //IE8- range = document.selection.createRange(); range.setEndPoint('EndToEnd', currentRange); if(currentRange.text.length === 0){ range.collapse(false); }else{ range.setEndPoint('StartToStart', currentRange); } range.select(); }
看這段代碼，你就能大體明白，兩者的實現方式根本就不一樣。
4. 考慮系統擴展性
我前半年看了不少設計模式的東西，也做過一個設計模式的教程《從設計到模式》，也研究過jquer的源碼，對系統的“擴展性”還是有一定的了解的。重構之前的wangEditor，因為重點放在了實現富文本的功能上，而忽略了擴展性的問題。這一次重構，我徹底的考慮了一下。
其實對於富文本編輯器來說，最基本的擴展性應該考慮以下幾點：
- W3C和IE低版本的兼容性；
- 菜單如何擴展，如何自定義排序、分組、顯示/隱藏；
- 命令（如加粗、字體顏色等）如何擴展，如何去彌補瀏覽器不完善的地方；
- 基本配置（字體、顏色、字號）如何擴展；
- ……
以上這些擴展性的問題，在本次重構中都考慮到了，並做了相應的實現。擴展性好的系統，會幫助開發人員以更清晰的思路升級、配置等。
5. 下一步……
下一步我想做幾個例子，例如上傳圖片、插入高亮顯示的code，來說明如何去使用wangEditor。
再下一步，我會把wangEditor的源碼簡單介紹一遍，介紹如何實現一個富文本框。
-------------------------------------------------------------------------------------------------------------
歡迎關注我的微博。
也歡迎關注我的教程：
《從設計到模式》《深入理解javascript原型和閉包系列》《微軟petshop4.0源碼解讀視頻》《json2.js源碼解讀視頻》
-------------------------------------------------------------------------------------------------------------