Quill - user000422/0 GitHub Wiki

設定

const quillToolbarOptions = [
    // 太字、斜体、下線、？strike
    ['bold', 'italic', 'underline', 'strike'],
    //
    ['blockquote', 'code-block'],
    // リンク、画像、動画、数式
    ['link', 'image', 'video', 'formula'],

    // 見出し h1, h2 …
    [{ 'header': 1 }, { 'header': 2 }],
    //
    [{ 'list': 'ordered' }, { 'list': 'bullet' }],  
    [{ 'script': 'sub' }, { 'script': 'super' }],
    [{ 'indent': '-1' }, { 'indent': '+1' }],
    [{ 'direction': 'rtl' }],

    //
    [{ 'size': ['small', false, 'large', 'huge'] }],

    // 文字色、背景色
    [{ 'color': [] }, { 'background': [] }],
    [{ 'font': [] }],
    [{ 'align': [] }],
];

■ツールバー オリジナルスタイルの場合
ツールバーにスタイルを当てたい場合
HTMLは決まったクラス名が存在している。クラス名を正確にすることで機能も活きる。

const quill = new Quill("#editor", {
    theme: "snow",
    modules: {
        toolbar: '#toolbar'
    }
});
<div id="toolbar">
  <!-- 太字 -->
  <button class="ql-bold"></button>

  <!-- 文字色 -->
  <select class="ql-color">
    <option value="red"></option>
  </select>
</div>

（応用）表作成機能「quill-better-table」

https://www.npmjs.com/package/quill-better-table

導入

npm install quill-better-table

⚠️ **GitHub.com Fallback** ⚠️