Quill のエディターとしての核となる強みは、豊富な API と強力なカスタマイズ機能です。 Quill の API 上に機能を実装する場合、これをモジュールとして編成すると便利な場合があります。このガイドでは、多くのワード プロセッサで一般的に見られる機能であるワード カウンタ モジュールを構築する 1 つの方法を説明します。
注: 内部的には、モジュールは Quill の機能がどの程度編成されているかを表します。これらのデフォルトを上書きできますモジュール独自のものを実装し、同じ名前で登録します。
中心となる単語カウンターは、エディター内の単語数を単純にカウントし、その値を何らかの UI に表示します。したがって、次のことを行う必要があります。
完全な例を見てみましょう!
もっとQuill にカスタム モジュールを追加するのに必要なのはこれだけです。関数としては、登録済みモジュールとして、対応する Quill エディター オブジェクトとオプションが渡されます。
モジュールには、目的の動作を微調整するために使用できるオプション オブジェクトが渡されます。これを使用して、ハードコーディングされた文字列の代わりにカウンター コンテナーのセレクターを受け入れることができます。また、単語または文字をカウントするようにカウンターをカスタマイズしましょう。
任意の関数を Quill モジュールとして登録できるため、カウンターを ES5 コンストラクターまたは ES6 クラスとして実装することもできます。これにより、モジュールに直接アクセスして利用できるようになります。
次に、ES6 のモジュールを磨き上げ、いくつかの厄介なバグを修正しましょう。必要なのはこれだけです！