ツールバーモジュール

ツールバーモジュールを使用すると、ユーザーは Quill のコンテンツを簡単にフォーマットできます。

Quill エディターにコンテナーとモジュールを作成するだけです。

<!-- Create toolbar container -->
<div id="toolbar">
  <!-- Add font size dropdown -->
  <select class="ql-size">
    <option value="10px">Small</option>
    <option value="13px" selected>Normal</option>
    <option value="18px">Large</option>
    <option value="32px">Huge</option>
  </select>
  <!-- Add a bold button -->
  <button class="ql-bold"></button>
</div>
<div id="editor"></div>

<!-- Initialize editor and toolbar -->
<script>
  var editor = new Quill('#editor');
  editor.addModule('toolbar', {
    container: '#toolbar'     // Selector for toolbar container
  });
</script>

のql-toolbarクラスはツールバーコンテナに追加されました。

クリックハンドラーは、次のように任意の DOM 要素に追加されます。クラス：

ql-bold
ql-italic
ql-strike
ql-underline
ql-link

変更 (DOMchangeイベント）ハンドラーは、次のクラスを持つ任意の DOM 要素に追加されます。

ql-background
ql-color
ql-font
ql-size

ツールバーはカーソルの動きも監視し、ql-activeクラスから要素へのカーソルが置かれているテキストの形式に対応するツールバー。

次のクラスもツールバーで認識されますが、主にによって使われたテーマスタイリング用:

ql-format-button
ql-format-group
ql-format-separator