提示：最新版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.rzrgm.cn/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源碼解讀視頻》

-------------------------------------------------------------------------------------------------------------