現代富文本編輯器Quill的模塊化機制

 

 

DevUI是一支兼具設計視角和工程視角的團隊,服務於華爲雲 DevCloud平臺和華爲內部數箇中後臺系統,服務於設計師和前端工程師。
官方網站: devui.design
Ng組件庫: ng-devui(歡迎Star)

引言

本文基於DevUI的富文本編輯器開發實踐Quill源碼寫成。前端

EditorX是DevUI開發的一款好用、易用、功能強大的富文本編輯器,它的底層基於Quill,並對其作了大量擴展,以加強編輯器的能力。git

Quill是一款API驅動、支持格式和模塊定製的開源Web富文本編輯器,目前在Github的Star數超過25kgithub

若是尚未接觸過Quill,建議先去Quill官網瞭解下它的基本概念。正則表達式

經過閱讀本文,你將收穫:api

  1. 瞭解Quill模塊是什麼,怎麼配置Quill模塊
  2. 爲何要建立Quill模塊,怎麼建立自定義Quill模塊
  3. Quill模塊如何與Quill進行通訊
  4. 深刻了解Quill的模塊化機制

Quill模塊初探

使用Quill開發過富文本應用的人,應該都對Quill的模塊有所瞭解。數組

好比,當咱們須要定製本身的工具欄按鈕時,會配置工具欄模塊:前端工程師

1 var quill = new Quill('#editor', {
2   theme: 'snow',
3   modules: {
4     toolbar: [['bold', 'italic'], ['link', 'image']]
5   }
6 });

其中的modules參數就是用來配置模塊的。app

toolbar參數用來配置工具欄模塊,這裏傳入一個二維數組,表示分組後的工具欄按鈕。編輯器

渲染出來的編輯器將包含4個工具欄按鈕:模塊化

 

 

要看以上Demo,請怒戳配置工具欄模塊

Quill模塊是一個普通的JS類

那麼Quill模塊是什麼呢?咱們爲何要了解和使用Quill模塊呢?

Quill模塊其實就是一個普通的JavaScript類,有構造函數,有成員變量,有方法。

如下是工具欄模塊的大體源碼結構:

 1 class Toolbar {
 2   constructor(quill, options) {
 3     // 解析傳入模塊的工具欄配置(就是前面介紹的二維數組),並渲染工具欄
 4   }
 5 
 6   addHandler(format, handler) {
 7     this.handlers[format] = handler;
 8   }
 9   ...
10 }

能夠看到工具欄模塊就是一個普通的JS類。在構造函數中傳入了quill的實例和options配置,模塊類拿到quill實例就能夠對編輯器進行控制和操做。

好比:工具欄模塊會根據options配置構造工具欄容器,將按鈕/下拉框等元素填充到該容器中,並綁定按鈕/下拉框的處理事件。最終的結果就是在編輯器主體上方渲染了一個工具欄,能夠經過工具欄按鈕/下拉框給編輯器內的元素設置格式,或者在編輯器中插入新元素。

Quill模塊的功能很強大,咱們能夠利用它來擴展編輯器的能力,實現咱們想要的功能。

除了工具欄模塊以外,Quill還內置了一些很實用的模塊,咱們一塊兒來看看吧。

Quill內置模塊

Quill一共內置6個模塊:

  1. Clipboard 粘貼版
  2. History 操做歷史
  3. Keyboard 鍵盤事件
  4. Syntax 語法高亮
  5. Toolbar 工具欄
  6. Uploader 文件上傳

Clipboard、History、Keyboard是Quill必需的內置模塊,會自動開啓,能夠配置但不能取消。其中:

Clipboard模塊用於處理複製/粘貼事件、HTML元素節點的匹配以及HTML到Delta的轉換。

History模塊維護了一個操做的堆棧,記錄了每一次的編輯器操做,好比插入/刪除內容、格式化內容等,能夠方便地實現撤銷/重作等功能。

Keyboard模塊用於配置鍵盤事件,爲實現快捷鍵提供便利。

Syntax模塊用於代碼語法高亮,它依賴外部庫highlight.js,默認關閉,要使用語法高亮功能,必須安裝highlight.js,並手動開啓該功能。

其餘模塊很少作介紹,想了解能夠參考Quill的模塊文檔

Quill模塊的配置

剛纔提到Keyboard鍵盤事件模塊,咱們再舉一個例子,加深對Quill模塊配置的理解。

Keyboard模塊默認支持不少快捷鍵,好比:

  1. 加粗的快捷鍵是Ctrl+B;
  2. 超連接的快捷鍵是Ctrl+K;
  3. 撤銷/回退的快捷鍵是Ctrl+Z/Y。

但它不支持刪除線的快捷鍵,若是咱們想定製刪除線的快捷鍵,假設是Ctrl+Shift+S,咱們能夠這樣配置:

 1 modules: {
 2   keyboard: {
 3     bindings: {
 4       strike: {
 5         key: 'S',
 6         ctrlKey: true,
 7         shiftKey: true,
 8         handler: function(range, context) {
 9           const format = this.quill.getFormat(range);
10           this.quill.format('strike', !format.strike);
11         }
12       },
13     }
14   },
15   toolbar: [['bold', 'italic', 'strike'], ['link', 'image']]
16 }

要看以上Demo,請怒戳配置鍵盤模塊

在使用Quill開發富文本編輯器的過程當中,咱們會遇到各類模塊,也會建立不少自定義模塊,全部模塊都是經過modules參數進行配置的。

接下來咱們將嘗試建立一個自定義模塊,加深對Quill模塊和模塊配置的理解。

建立自定義模塊

經過上一節的介紹,咱們瞭解到其實Quill模塊就是一個普通的JS類,並無什麼特殊的,在該類的初始化參數中會傳入Quill實例和該模塊的options配置參數,而後就能夠控制並加強編輯器的功能。

當Quill內置模塊沒法知足咱們的需求時,就須要建立自定義模塊來實現咱們想要的功能。

好比:在EditorX富文本組件中有一個統計編輯器當前字數的功能,該功能就是經過自定義模塊來實現的,下面咱們將一步一步介紹如何將改該功能封裝成獨立的Counter模塊。

建立一個Quill模塊分三步:

第一步:建立模塊類

新建一個JS文件,裏面是一個普通的JavaScript類。

1 class Counter {
2   constructor(quill, options) {
3     console.log('quill:', quill);
4     console.log('options:', options);
5   }
6 }
7 
8 export default Counter;

這是一個空類,什麼都沒有,只是在初始化方法中打印了Quill實例和模塊的options配置信息。

第二步:配置模塊參數

1 modules: {
2   toolbar: [
3     ['bold', 'italic'],
4     ['link', 'image']
5   ],
6   counter: true
7 }

咱們先不傳配置數據,只是簡單地將該模塊啓用起來,結果發現並無打印信息。

第三步:註冊模塊

要使用一個模塊,須要在Quill初始化以前先調用Quill.register方法註冊該模塊類(後面咱們詳細介紹其中的原理),而且因爲咱們須要擴展的是模塊(module),因此前綴須要以modules開頭:

1 import Quill from 'quill';
2 import Counter from './counter';
3 Quill.register('modules/counter', Counter);

這時咱們能看到信息已經打印出來。

添加模塊的邏輯

這時咱們在Counter模塊中加點邏輯,用於統計當前編輯器內容的字數:

1 constructor(quill, options) {
2   this.container = quill.addContainer('ql-counter');
3   quill.on(Quill.events.TEXT_CHANGE, () => {
4     const text = quill.getText(); // 獲取編輯器中的純文本內容
5     const char = text.replace(/\s/g, ''); // 使用正則表達式將空白字符去掉
6     this.container.innerHTML = `當前字數:${char.length}`;
7   });
8 }

在Counter模塊的初始化方法中,咱們調用Quill提供的addContainer方法,爲編輯器增長一個空的容器,用於存放字數統計模塊的內容,而後綁定編輯器的內容變動事件,這樣當咱們在編輯器中輸入內容時,字數能實時統計。

在Text Change事件中,咱們調用Quill實例的getText方法獲取編輯器裏的純文本內容,而後用正則表達式將其中的空白字符去掉,最後將字數信息插入到字符統計的容器中。

展現的大體效果以下:

要看以上Demo,請怒戳自定義字符統計模塊

模塊加載機制

對Quill模塊有了初步的理解以後,咱們就會想知道Quill模塊是如何運做的,下面將從Quill的初始化過程切入,經過工具欄模塊的例子,深刻探討Quill的模塊加載機制。(本小結涉及Quill源碼的解析,有不懂的地方歡迎留言討論)

Quill類的初始化

當咱們執行new Quill()的時候,會執行Quill類的constructor方法,該方法位於Quill源碼的core/quill.js文件中。

初始化方法的大體源碼結構以下(移除模塊加載無關的代碼):

 1 constructor(container, options = {}) {
 2   this.options = expandConfig(container, options); // 擴展配置數據,包括增長主題類等
 3   ...
 4   this.theme = new this.options.theme(this, this.options); // 1.使用options中的主題類初始化主題實例
 5 
 6   // 2.增長必需模塊
 7   this.keyboard = this.theme.addModule('keyboard');
 8   this.clipboard = this.theme.addModule('clipboard');
 9   this.history = this.theme.addModule('history');
10 
11   this.theme.init(); // 3.初始化主題,這個方法是模塊渲染的核心(實際的核心是其中調用的addModule方法),會遍歷配置的全部模塊類,並將它們渲染到DOM中
12   ... 
13 }

Quill在初始化時,會使用expandConfig方法對傳入的options進行擴展,加入主題類等元素,用於初始化主題。(不配置主題也會有默認的BaseTheme主題)

以後調用主題實例的addModule方法將內置必需模塊掛載到主題實例中。

最後調用主題實例的init方法將全部模塊渲染到DOM。(後面會詳細介紹其中的原理)

若是是snow主題,此時將會看到編輯器上方出現工具欄:

若是是bubble主題,那麼當選中一段文本時,會出現工具欄浮框:

接下來咱們以工具欄模塊爲例,詳細介紹Quill模塊的加載和渲染原理。

工具欄模塊的加載

以snow主題爲例,當初始化Quill實例時配置如下參數:

1 {
2   theme: 'snow',
3   modules: {
4     toolbar: [['bold', 'italic', 'strike'], ['link', 'image']]
5   }
6 }

Quill的constructor方法中獲取到的this.theme是SnowTheme類的實例,執行this.theme.init()方法時調用的是其父類Theme的init方法,該方法位於core/theme.js文件。

1 init() {
2   // 遍歷Quill options中的modules參數,將全部用戶配置的modules掛載到主題類中
3   Object.keys(this.options.modules).forEach(name => {
4     if (this.modules[name] == null) {
5       this.addModule(name);
6     }
7   });
8 }

它會遍歷options.modules參數中的全部模塊,調用BaseTheme的addModule方法,該方法位於themes/base.js文件。

1 addModule(name) {
2   const module = super.addModule(name);
3   if (name === 'toolbar') {
4     this.extendToolbar(module);
5   }
6   return module;
7 }

該方法會先執行其父類的addModule方法,將全部模塊初始化,若是是工具欄模塊,則會在工具欄模塊初始化以後對工具欄模塊進行額外的處理,主要是構建icons和綁定超連接快捷鍵。

咱們再回過頭來看下BaseTheme的addModule方法,該方法是模塊加載的核心

該方法前面咱們介紹Quill的初始化時已經見過,加載三個內置必需模塊時調用過。其實全部模塊的加載都會通過該方法,所以有必要研究下這個方法,該方法位於core/theme.js

1 addModule(name) {
2   const ModuleClass = this.quill.constructor.import(`modules/${name}`); // 導入模塊類,建立自定義模塊的時候須要經過Quill.register方法將類註冊到Quill,才能導入
3   // 初始化模塊類
4   this.modules[name] = new ModuleClass(
5     this.quill,
6     this.options.modules[name] || {},
7   );
8   return this.modules[name];
9 }

addModule方法會先調用Quill.import方法導入模塊類(經過Quill.register方法註冊過的才能導入)。

而後初始化該類,將其實例掛載到主題類的modules成員變量中(此時該成員變量已有內置必須模塊的實例)。

以工具欄模塊爲例,在addModule方法中初始化的是Toolbar類,該類位於modules/toolbar.js文件。

 1 class Toolbar {
 2   constructor(quill, options) {
 3     super(quill, options);
 4 
 5     // 解析modules.toolbar參數,生成工具欄結構
 6     if (Array.isArray(this.options.container)) {
 7       const container = document.createElement('div');
 8       addControls(container, this.options.container);
 9       quill.container.parentNode.insertBefore(container, quill.container);
10       this.container = container;
11     } else {
12       ...
13     }
14 
15     this.container.classList.add('ql-toolbar');
16 
17     // 綁定工具欄事件
18     this.controls = [];
19     this.handlers = {};
20     Object.keys(this.options.handlers).forEach(format => {
21       this.addHandler(format, this.options.handlers[format]);
22     });
23     Array.from(this.container.querySelectorAll('button, select')).forEach(
24       input => {
25         this.attach(input);
26       },
27     );
28     ...
29   }
30 }

工具欄模塊初始化時會先解析modules.toolbar參數,調用addControls方法生成工具欄按鈕和下拉框(基本原理就是遍歷一個二維數組,將它們以按鈕/下拉框形式插入到工具欄中),併爲它們綁定事件。

 1 function addControls(container, groups) {
 2  if (!Array.isArray(groups[0])) {
 3   groups = [groups];
 4  }
 5  groups.forEach(controls => {
 6   const group = document.createElement('span');
 7   group.classList.add('ql-formats');
 8   controls.forEach(control => {
 9     if (typeof control === 'string') {
10       addButton(group, control);
11     } else {
12       const format = Object.keys(control)[0];
13       const value = control[format];
14       if (Array.isArray(value)) {
15         addSelect(group, format, value);
16       } else {
17         addButton(group, format, value);
18       }
19     }
20   });
21   container.appendChild(group);
22  });
23 }

工具欄模塊就這樣被加載並渲染到富文本編輯器中,爲編輯器操做提供便利。

如今對模塊的加載過程作一個小結:

  1. 模塊加載的起點是Theme類的init方法,該方法將option.modules參數裏配置的全部模塊加載到主題類的成員變量modules中,並與內置必需模塊合併;
  2. addModule方法會先經過import方法導入模塊類,而後經過new關鍵字建立模塊實例;
  3. 建立模塊實例時會執行模塊的初始化方法,執行模塊的具體邏輯。

如下是模塊與編輯器實例的關係圖:

總結

本文先經過2個例子簡單介紹了Quill模塊的配置方法,讓你們對Quill模塊有個直觀初步的印象。

而後經過字符統計模塊這個簡單的例子介紹如何開發自定義Quill模塊,對富文本編輯器的功能進行擴展。

最後經過剖析Quill的初始化過程,逐步切入Quill模塊的加載機制,並詳細闡述了工具欄模塊的加載過程。

加入咱們

咱們是DevUI團隊,歡迎來這裏和咱們一塊兒打造優雅高效的人機設計/研發體系。招聘郵箱:muyang2@huawei.com。

文/DevUI Kagol

相關文章
相關標籤/搜索