Quill のエディターとしての核となる強みは、豊富な API と強力なカスタマイズ機能です。 Quill の API 上に機能を実装する場合、これをモジュールとして編成すると便利な場合があります。このガイドでは、多くのワード プロセッサで一般的に見られる機能であるワード カウンタ モジュールを構築する 1 つの方法を説明します。
注: 内部的には、モジュールは Quill の機能がどの程度編成されているかを表します。これらのデフォルトを上書きできますモジュール独自のものを実装し、同じ名前で登録します。
中心となる単語カウンターは、エディター内の単語数を単純にカウントし、その値を何らかの UI に表示します。したがって、次のことを行う必要があります。
完全な例を見てみましょう!
もっと
// Implement and register module
Quill.register('modules/counter', function(quill, options) {
var container = document.querySelector('#counter');
quill.on('text-change', function() {
var text = quill.getText();
// There are a couple issues with counting words
// this way but we'll fix these later
container.innerText = text.split(/\s+/).length;
});
});
// We can now initialize Quill with something like this:
var quill = new Quill('#editor', {
modules: {
counter: true
}
});
Quill にカスタム モジュールを追加するのに必要なのはこれだけです。関数としては、登録済みモジュールとして、対応する Quill エディター オブジェクトとオプションが渡されます。
モジュールには、目的の動作を微調整するために使用できるオプション オブジェクトが渡されます。これを使用して、ハードコーディングされた文字列の代わりにカウンター コンテナーのセレクターを受け入れることができます。また、単語または文字をカウントするようにカウンターをカスタマイズしましょう。
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'
}
}
});
任意の関数を Quill モジュールとして登録できるため、カウンターを ES5 コンストラクターまたは ES6 クラスとして実装することもできます。これにより、モジュールに直接アクセスして利用できるようになります。
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');
// We can now access calculate() directly
console.log(counter.calculate(), 'words');
次に、ES6 のモジュールを磨き上げ、いくつかの厄介なバグを修正しましょう。必要なのはこれだけです！
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(); // Account for initial contents
}
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'
}
}
});