Quill 作為編輯器的核心優勢在於它提供了豐富的 API 與容易實現客製化的功能。當我們基於 Quill 的 API 實作功能時,可以包成一個 module 較方便使用。今天一起探討如何擴充 Quill 編輯器的功能,讓我們可以依照特定的需求實現並加入,使編輯器的功能更豐富以貼近專案的特殊需求。

註冊 Quill 自訂模組

假設我們需要新增一個能顯示編輯器當前字數的計數器,首先需要建立一個名為 counter 的 module:

// 建立自訂 Module
createCustomModule() {
    Quill.register(
      'modules/counter', // 自訂 module 名稱
      function (quill: Quill, options: QuillOptions) {
        const container: HTMLDivElement = document.querySelector('#counter')!;
        // 透過 text-change 事件監聽處理
        quill.on('text-change', function () {
          // 獲取 quill 文本內容
          const text = quill.getText();
          // 根據 module options 來決定計算單位
          if (options.unit === 'word') {
            container.innerText = text.split(/\s+/).length + ' words';
          } else {
            container.innerText = text.length + ' characters';
          }
        });
      }
    );
}

// 初始化的操作
const quill = new Quill('#editor', {
  modules: {
    counter: {
      container: '#counter', // 設定 counter HTML id
      unit: 'word' // 設定文本計算單位
    }
  }
});

上面的範例中,我們宣告了一個 createCustomModule function,並透過 Quill.register 註冊一個名為 counter 的 module,第一個參數是 module name, 第二個參數則是帶入一個 function,這個 function 可以取得 Quilloptions 參數。

function 的實現是利用監聽 Quill 的 text-change 事件,當文本內容改變的時候觸發,並執行對應的操作。這裡根據 unit 參數來決定計算單位。Quill 初始化的時候,我們可以在 modules 底下設定 counter 也就是 custom module 名稱,並帶入像是 container, unit 的參數設定計數器的 HTML 以及計算單位。

Keyboard module 監聽事件

我們可以透過監聽事件來執行額外的操作,並根據事件觸發類型相應的功能。Quill 提供了幾種不同的監聽事件,除了像上面的範例用到了 text-change 之外,在 keyboard module 也提供了按鍵事件綁定,讓我們可以設定,當某個按鍵觸發的時候,執行自訂的功能。

處理 Quill Editor 的按鍵事件,可以透過 keyboard module 設定監聽按鍵的事件,例如按下某個按鍵或是組合鍵就進行對應的處理:

const quillConfig = {
  modules: {
    // 其他模組...
    keyboard: {
      bindings: {
        enter: {
          key: 'Enter',
          handler: function(range, context) {
            // 在這裡處理按下 Enter 鍵後的邏輯
            console.log('Enter 鍵被按下');
          }
        }
      }
    }
  },
  theme: 'snow',
};   

上面的範例是當 Enter 鍵按下的時候,就執行 handler 帶入的 function,這裡我們簡單用個 console.log 實驗一下就好,至於參數 rangecontext 是什麼,我們之後再來細看。

實用的擴充套件

當需要更特殊或複雜的功能時,我們可以透過自訂的擴充套件來實現。只要依照 Quill 的擴充自訂功能的方式,就能夠為編輯器新增各種功能。官方文件也整理了一份清單,收錄了好用的擴充套件供大家參考並能安裝使用。

小結

今天我們初步體驗了如何自訂並註冊自訂的 module,並且利用 Quill 提供的監聽事件來處理額外的事情,也嘗試加入按鍵綁定事件,並在指定的按鍵觸發的時候呼叫自訂的方法。只是簡單的利用 Quill 提供的 API 就能讓我們實現額外的功能,由此可知 Quill 的可擴充性是非常高的。在 Github 上我們也能看到多樣的自訂功能模組可以直接安裝使用。但當遇到非常特殊的需求時,我們也可以按照需求來實現。

雜記

今天參加了 Study4 的活動小聚,然後不知道怎麼聊的,聊到同事A需要在上班時間偶爾回訊息給老婆,同事B就問說上班時間為什麼要回訊息,同事A說,因為有時候要安撫一下老婆,回應老婆大人的抱怨什麼之類的,於是我就比喻,上班時間偶爾還是會被 ping 一下,我們還是要回個 200,這時另一個社群朋友就問,那如果 404500 怎麼辦?我想,回去就完蛋吧 ˊ_>ˋ 室友說:也許可以用 301,我:???

Reference

文章同步發表於2023 iThome 鐵人賽