明天北北基桃沒有放颱風假，大家上班注意安全。
今天開始進到 Module 的章節。

Module 允許 Quill 的操作行為與功能實現客製化。有幾個官方支援的模組可供選擇，其中一些還有額外的配置選項和API。目前官網列出支援的模組有：Toolbar，Keyboard，History，Clipboard，以及Syntax Highlighter。各章節也都會提到如何使用以及有哪些 API 可供操作。

要啟用模組只需要把要使用的模組加到 Quill 的配置中即可：

const quill = new Quill('#editor', { 
    modules: { 
        'history': { // Enable with custom configurations 
            'delay': 2500, 
            'userOnly': true 
        }, 
        'syntax': true // Enable with default configuration 
    } 
});

Clipboard，Keyboard 和 History 模組是 Quill 所必需的，不需要明確設定就預設在裡面了，但也可以像其他模組一樣進行設定。

繼承 (Extending)

模組也可以繼承和重新註冊，替換掉原本的模組。甚至原本預設內建的必要模組也能重新註冊來做替換。例如繼承 clipboard 模組並自訂一些功能：

const Clipboard = Quill.import('modules/clipboard'); 
const Delta = Quill.import('delta'); 
class PlainClipboard extends Clipboard { 
    convert(html = null) { 
        if (typeof html === 'string') { 
            this.container.innerHTML = html; 
        } 
        let text = this.container.innerText; 
        this.container.innerHTML = ''; 
        return new Delta().insert(text); 
    } 
} 

Quill.register('modules/clipboard', PlainClipboard, true); 

// Will be created with instance of PlainClipboard 
const quill = new Quill('#editor');

上面這個範例只是為了解釋 module 提供的可能性。單純用既有模組提供的 API 或 config 通常會更容易些。在這個 clipboard 模組擴充的操作範例中，用現有的 addMatcher 其實就能夠滿足大部分的情境需求了。

小結

今天介紹了 Quill 的 module，強調其客製化，以及可繼承並擴展。Quill 內建了許多豐富的 module，讓我們可以按照需求選擇和配置。繼承的部分則允許開發者擴充新功能並替換原有的模組，同時也提到單純使用既有的 API 或設定也許就能滿足大部分的需求。在這個章節，我們了解如何利用 module 來啟用 Quill 的功能，並依照實際需求進行繼承及擴充自訂功能，之後來介紹並研究一下第三方的開源套件要如何使用，以及他們是如何實現自訂功能的。應該能有不少收穫。

雜記

最近上下班的運氣都還不錯，儘管有下雨，但出門跟下班回家的這段時間都是無雨的，今天又去了整復保養一下，然後再去看中醫，弄得時間有點晚。這次的颱風感覺也是來者不善，放颱風假就乖乖待在家，看點書追個劇也好。我明天要繼續去上班了 QQ

Reference

• Modules - Quill Rich Text Editor (quilljs.com)

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