Quill.js を使用してテキストエディタを構築する-jsチュートリアル-php.cn

Quill.js を使用してテキストエディタを構築する

WBOY

リリース： 2023-08-23 23:29:02

転載

1293 人が閲覧しました

Quill.js を使用してテキストエディタを構築する

Quill は、WYSIWYG エディターのカテゴリに分類される無料のオープンソーステキストエディターであり、主に現在使用されている最新の Web で使用されています。これは、多くの表現力豊かな API を備えた、高度にカスタマイズ可能なテキストエディターです。 Quill は非常に使いやすく、マークアップの経験しかない人でも理解しやすい優れたインターフェイスを提供します。

このチュートリアルでは、Quill.js を使用してテキストエディターを構築する方法を複数の例を使用して説明します。

WYSIWYG テキストエディターであるリッチテキストエディターは多数ありますが、最も広く使用されているのは Quill であり、その差は非常に大きいです。それでは、Quill の使い方を学びましょう。

Quill を使用して基本的なテキストエディタを作成しましょう

Quill を使用する最初のステップは、選択したエディターで Quill を使用できるようにすることです。これを行うには、以下に示す 2 つの CDN リンクを HTML コードの

タグに配置する必要があります。リーリー

最初の CDN リンクは Quill の CSS スタイルファイルで、2 番目の CDN リンクは Quill の JavaScript ファイルです。上に示した 2 行のコードを HTML コードの

タグに追加する必要があります。

タグは次のようになります。

リーリー

タグに CDN を追加したので、次はタグの作業を開始します。タグ内に、id="editor" を指定した

タグを作成し、高さを指定する簡単なスタイルをいくつか追加しましょう。以下に示すタグを参照してください。リーリー上記のコードでは、ID が「editor」の

タグを作成し、高さ 250px を指定したシンプルなスタイルを提供します。

あとは、<script> タグを作成し、その中に Quill クラスのインスタンスを作成し、作成した <div> の ID を最初のパラメータとして渡し、2 番目の A を渡すだけです。パラメータは基本的に、テキストエディタでプロパティを指定するオブジェクトです。 </script>

次に示す <script>タグ </script> について考えてみましょう。

リーリー

上記の <script> タグは、<body> タグの最後、つまり <body> タグが閉じる前に配置する必要があります。 </script>

index.html

HTML コード全体を以下に示します。

＃＃＃例＃＃＃リーリー

上記の HTML ファイルをブラウザで開くと、ブラウザにテキストエディタの出力が表示されます。表示されるテキストエディターには、自由に使用できる多数のツールバーオプションがあり、そのどれもテキストエディターで使用できます。

テキストエディタの外観をカスタマイズしましょう

次に、通常のテキストエディターでデフォルトで表示されるすべてのオプションではなく、デフォルトのツールバーオプションを 2 つだけ提供するとします。この場合、以下に示す <script> タグを使用できます。 </script>

リーリー

上記の <script> タグでは、ツールバーに太字、斜体、下線の 3 つのオプションのみを提供しているため、テキストエディターで使用できるのはこれらのオプションのみです。 </script>

index.html

以下に、更新された Index.html ファイルを示します。

＃＃＃例＃＃＃リーリー

上記のファイルをブラウザで実行すると、テキストエディタには 3 つのツールバーオプション (太字オプション、斜体オプション、および下線オプション) のみが表示されます。

テキストエディタの内容をコンソールに記録します

ここで、テキストエディターに書いた内容をコンソールに記録したいとします。これを行うには、まず

タグ内にボタンを作成する必要があります。

ボタンを作成する以下のコードスニペットを考えてみましょう。

リーリー

次に、<script> タグに焦点を当てましょう。ここでは、Quill テキストエディターの内容とその他のツールバーオプションを実際に記録する関数を作成する必要があります。 </script>

次に示す更新された <script> タグを考えてみましょう。 </script>

リーリー上記の <script> タグには、quill オブジェクトの root プロパティに存在するコンテンツを出力する consoleHTMLContent という関数があります。 <p>index.html<p> <p>更新された <b>index.html コードは次のとおりです。＃＃＃例＃＃＃リーリー <p> 上記のコードをブラウザで実行すると、テキストエディタが表示されます。エディタにテキストを入力してボタンをクリックすると、quill テキストエディタのルートオブジェクトがコンソールに表示されます。 <b> ＃＃＃出力＃＃＃エディターで簡単なコード行を記述してボタンをクリックすると、これがブラウザーコンソールに表示される出力です。リーリー＃＃＃結論は＃＃＃ <h3> このチュートリアルでは、Quill.js を使用して、さまざまなツールバーオプションを備えたテキストエディターを作成する方法を示します。複数の例を通して、ツールバーを追加または削除する方法、および Quill テキストエディターでルート要素を制御する方法を説明します。 </script>

以上がQuill.js を使用してテキストエディタを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。