構建一個自定義模塊 · Quill官方中文文檔

[TOC] Quill編輯器的核心優勢是有豐富的API和強大的定制能力。當你想在Quill的API上擴展功能時，將其作為一個模塊來管理可能會比較方便。在本文中，我將介紹構建一種技術器模塊的方法，這是許多文字處理軟件的常見功能。注意：Quill含有特定功能的內置模塊，你可以通過實現你自己模塊并用相同的名稱注冊來覆蓋這些默認[模塊](../模塊modules.md)。 ## 文字計數文字計數器的核心功能就是計算編輯器中的字數，并在通過某些UI顯示出來。因此，我們需要： 1. 監聽Quill的text-change時間 1. 計算字數 1. 顯示結果. 讓我們之間展示一惡搞完整的例子！ ```js // 實現并注冊模塊 Quill.register('modules/counter', function(quill, options) { var container = document.querySelector('#counter'); quill.on('text-change', function() { var text = quill.getText(); //用這種方法計算字數有幾個問題，我們以后會解決 container.innerText = text.split(/\s+/).length; }); }); // 現在，我們可以像這樣初始化Quill var quill = new Quill('#editor', { modules: { counter: true } }); ``` 這樣，我們在Quill中添加了一個自定義模塊。函數功能可以作為模塊[注冊](../api.md)，并且注冊時可以傳遞相應的Quill對象和任何選項。 ## 使用Options 模塊可以傳遞一個option對象，這個option對象可以用作調整所需的行為。我們可以使用這個來接受顯示計數器的容器，而不是硬編碼字符串。下面，我們讓計數器實現計算單詞或字符的功能： ```js Quill.register('modules/counter', function(quill, options) { var container = document.querySelector(options.container); quill.on('text-change', function() { var text = quill.getText(); if (options.unit === 'word') { container.innerText = text.split(/\s+/).length + ' words'; } else { container.innerText = text.length + ' characters'; } }); }); var quill = new Quill('#editor', { modules: { counter: { container: '#counter', unit: 'word' } } }); ``` ## 構造器(Constructors) 由于任何函數都可以注冊為Quill模塊，我們可以用ES5 constructor或ES6類來實現計數器功能。這讓我們可以直接訪問和使用模塊。 ```js var Counter = function(quill, options) { this.quill = quill; this.options = options; var container = document.querySelector(options.container); var _this = this; quill.on('text-change', function() { var length = _this.calculate(); container.innerText = length + ' ' + options.unit + 's'; }); }; Counter.prototype.calculate = function() { var text = this.quill.getText(); if (this.options.unit === 'word') { return text.split(/\s+/).length; } else { return text.length; } }; Quill.register('modules/counter', Counter); var quill = new Quill('#editor', { modules: { counter: { container: '#counter', unit: 'word' } } }); var counter = quill.getModule('counter'); // 我們可以直接訪問calculate。 console.log(counter.calculate(), 'words'); ``` ## 打包現在，我們發布這個ES6模塊并且修復一些討厭的錯誤。就這樣。 ```js class Counter { constructor(quill, options) { this.quill = quill; this.options = options; this.container = document.querySelector(options.container); quill.on('text-change', this.update.bind(this)); this.update(); // 初始化內容 } calculate() { let text = this.quill.getText(); if (this.options.unit === 'word') { text = text.trim(); // Splitting empty text returns a non-empty array return text.length > 0 ? text.split(/\s+/).length : 0; } else { return text.length; } } update() { var length = this.calculate(); var label = this.options.unit; if (length !== 1) { label += 's'; } this.container.innerText = length + ' ' + label; } } Quill.register('modules/counter', Counter); var quill = new Quill('#editor', { modules: { counter: { container: '#counter', unit: 'word' } } }); ```