重構wangEditor(web富文字編輯器),歡迎指正!

王福朋發表於2014-12-22

提示:最新版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原始碼解讀視訊

 

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

相關文章