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

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

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

単語を数える

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

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

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

もっと

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

オプションの使用

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

コンストラクター

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

すべてをまとめる

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

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