Day 7：Quill Editor 擴充自訂功能

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 可以取得 Quill 及 options 參數。

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 實驗一下就好，至於參數 range 及 context 是什麼，我們之後再來細看。

實用的擴充套件

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

小結

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

雜記

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

Reference

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

Jeff Wu's Note