重構wangEditor（web富文本編輯器），歡迎指正！

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

 

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