【Laravel】Quillのfont-familyをカスタマイズしてフォントを追加する

リッチテキストエディタ『Quill』のツールバーに、任意のフォントを並べる方法を解説します。

結論から書くと、Quill.import('attributors/style/font') でフォントの属性を取り出し、whitelist に使いたいフォント名の配列を入れて登録し直します。あわせて、ツールバーの選択肢にフォント名を表示するCSSが必要です。

Quill は初期状態だと、フォントの選択肢が Sans Serif・Serif・Monospace の3つしかありません。この3つ以外を使いたい場合に、この記事の手順が必要になります。

コードは Quill 2.0.3 で動作を確認しています。Quill.import() と Quill.register() の書き方は 1.x から変わっていません。

Quillのfont-familyをカスタマイズするjs

結論：フォント名の配列を作り、Font.whitelist に渡して Quill.register(Font, true) で登録します。同じ配列をツールバーの font にも渡します。

要点は次の3行です。

const fontFamilyArr = ['system-ui', 'sans-serif', 'arial', 'serif', 'monospace'];
const Font = Quill.import('attributors/style/font');
Font.whitelist = fontFamilyArr;
Quill.register(Font, true);

Quill.register() の第2引数の true は「既存の登録を上書きする」という意味です。これを省くと、既定の3つのフォントのままになります。

attributors/style/font と attributors/class/font の違いに注意してください。この記事では style のほうを使っています。

▼styleとclassの違い

Laravel で本文をデータベースに保存し、別のページで表示する使い方なら style を選んでください。class だと、表示側にも Quill のCSSを読み込むか、ql-font-arial に対応するスタイルを自分で書く必要があります。

全体のソースコードは下記の通りです。

/**
    関数： テキストエディタの生成
    引数： 作成する場所のid
    戻り値： Quillエディタの生成情報
**/
function quillEditor(make_id) {

    const themes = set_themes();

    // font-family
    const fontFamilyArr =
    ['system-ui', 'sans-serif', 'arial', 'serif', 'monospace', 'Courier', 'cursive', 'Comic Sans MS','fantasy'];
    const Font = Quill.import('attributors/style/font');
    Font.whitelist = fontFamilyArr;
    Quill.register(Font, true);

    // ツールバー機能の設定
    const toolbarOptions = [
        // 見出し
        [{
            'header': [1, 2, 3, 4, false]
        }],
        // フォント種類
        [{
            'font': fontFamilyArr
        }],
        // 文字寄せ
        [{
            'align': []
        }],
        // 太字、斜め、アンダーバー
        ['bold', 'italic', 'underline'],
        // 文字色
        [{
                'color': []
            },
            // 文字背景色
            {
                'background': []
            }
        ],
        // リスト
        [{
                'list': 'ordered'
            },
            {
                'list': 'bullet'
            }
        ],
        // インデント
        [{
            'indent': '-1'
        }, {
            'indent': '+1'
        }],
        // 画像挿入
        ['image'],
        // 動画
        ['video'],
        // 数式
        ['formula'],
        // URLリンク
        ['link']
    ];

    make_id = '#' + make_id;

    // エディタの情報を生成
    const quill = new Quill(make_id, {
        modules: {
            toolbar: toolbarOptions
        },
        placeholder: '本文を入力してください',
        theme: themes
    });

    return quill;
}


// テーマ設定（PCとSPでテーマを切り替える）
function set_themes() {
    // 画面幅が750pxより広ければ snow、狭ければ bubble
    return window.matchMedia('(min-width: 751px)').matches ? 'snow' : 'bubble';
}

Quillのfont-familyをカスタマイズするcss

結論：CSSを書かないと、追加したフォントがツールバーで「Sans Serif」などの既定ラベルのまま表示されます。content: attr(data-value) で、フォント名そのものをラベルに出します。

Quill は、既定の3つのフォントにだけ表示用のラベルを持っています。whitelist に追加したフォントには対応するラベルが無いため、そのままだと選択肢の見分けが付きません。

scssでの記述です。

.ql-snow,
.ql-bubble {
    .ql-picker {
        &.ql-font {
            .ql-picker-label,
            .ql-picker-item {
                &::before {
                    content: attr(data-value) !important;
                }
            }
        }
    }
}

テーマを切り替えている場合は .ql-snow だけでなく .ql-bubble にも当ててください。上のJavaScriptは画面幅でテーマを切り替えているので、スマートフォンで開いたときは .ql-bubble になります。.ql-snow だけに書いていると、スマートフォンでフォント名が表示されません。

選択肢に実際のフォントで表示したい場合は、font-family も添えます。

.ql-picker.ql-font .ql-picker-item[data-value="arial"]::before {
    font-family: arial;
}

この記事のコードを動かす前に

結論：この記事はQuillがすでに動いている前提のカスタマイズです。導入がまだなら先にそちらを済ませてください。

CDNの読み込みから new Quill() までの手順は、Laravelにリッチテキストエディタ『Quill』を実装するにまとめています。Quill 2.0 で配布元のURLが変わっているので、古い記事のCDNをコピーしてきた場合は動きません。

同じ要領で文字サイズの選択肢も増やせます。手順はエディタ『Quill』のfont-sizeをカスタマイズするにまとめました。font の部分を size に置き換えるだけなので、まとめて設定してしまうのが楽です。

▼Quillのfont-sizeをカスタマイズしたい方はこちらの記事をどうぞ

▼HTML/CSS/JavaScriptの学習本を探してる方はこちらの記事をどうぞ