カスタムモジュールの構築

2014 年 8 月 14 日 -ジェイソン・チェン

注: 1.0 および ES6 用の更新されたガイドが利用可能ですここ。

Quill のエディターとしての核となる強みは、豊富な API と強力なカスタマイズ機能です。 Quill をカスタマイズする最良の方法の 1 つは、モジュールを使用することです。モジュールは Quill の機能を拡張する簡単な方法です。このガイドでは、多くのワードプロセッサで一般的に見られる機能であるワードカウンタモジュールを構築する 1 つの方法を説明します。

単語を数える

中心となる単語カウンターは、エディター内の単語数を単純にカウントし、その値を何らかの UI に表示します。したがって、次のことを行う必要があります。

Quill でテキストの変更を聞きます。
単語の数を数えます。
この値を表示します。

完全な例を見てみましょう!

もっと


// Implement and register module
Quill.registerModule('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
    // this way but we'll fix this later
    container.innerHTML = text.split(/\s+/).length;
  });
});

// We can now initialize Quill with something like this:
var quill = new Quill('#editor', {
  modules: {
    counter: true
  }
});

Quill にカスタムモジュールを追加するのに必要なのはこれだけです。関数としては、登録済みモジュールとして、対応する Quill エディターオブジェクトとオプションが渡されます。

オプションの使用

モジュールには、目的の動作を微調整するために使用できるオプションオブジェクトが渡されます。これを使用して、ハードコーディングされた文字列の代わりにカウンターコンテナーのセレクターを受け入れることができます。また、単語または文字をカウントするようにカウンターをカスタマイズしましょう。


Quill.registerModule('counter', function(quill, options) {
  var container = document.querySelector(options.container);
  quill.on('text-change', function() {
    var text = quill.getText();
    if (options.unit === 'word') {
      container.innerHTML = text.split(/\s+/).length + ' words';
    } else {
      container.innerHTML = text.length + ' characters';
    }
  });
});

var quill = new Quill('#editor', {
  modules: {
    counter: {
      container: '#counter',
      unit: 'word'
    }
  }
});

コンストラクター

任意の関数を Quill モジュールとして登録できるため、カウンターをコンストラクターとして実装することもできます。これにより、モジュールに直接アクセスして利用できるようになります。


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.innerHTML = 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.registerModule('counter', Counter);

var quill = new Quill('#editor');
var counter = quill.addModule('counter', {
  container: '#counter',
  unit: 'word'
});

// We can now access calculate() directly
console.log(counter.calculate(), 'words');

すべてをまとめる

次に、モジュールを磨き上げて、いくつかの厄介なバグを修正しましょう。


var Counter = function(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
};

Counter.prototype.calculate = function() {
  var 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;
  }
};

Counter.prototype.update = function() {
  var length = this.calculate();
  var label = this.options.unit;
  if (length !== 1) {
    label += 's';
  }
  this.container.innerHTML = length + ' ' + label;
}

Quill.registerModule('counter', Counter);

var quill = new Quill('#editor');
var counter = quill.addModule('counter', {
  container: '#counter',
  unit: 'word'
});

必要なのはこれだけです！構築できる一般的なタイプのモジュールに関するさらなるガイドをお待ちください。