【Laravel】Quillのfont-sizeをカスタマイズして文字サイズを追加する
リッチテキストエディタ『Quill』のツールバーに、任意の文字サイズを並べる方法を解説します。
結論から書くと、Quill.import('attributors/style/size') でサイズの属性を取り出し、whitelist に使いたいサイズの配列を入れて登録し直します。あわせて、選択肢にサイズを表示するCSSが必要です。
Quill は初期状態だと、文字サイズの選択肢が Small・Normal・Large・Huge の4段階しかありません。「14px」「16px」のように具体的な値で選ばせたい場合に、この記事の手順が必要になります。
コードは Quill 2.0.3 で動作を確認しています。Quill.import() と Quill.register() の書き方は 1.x から変わっていません。
Quillのfont-sizeをカスタマイズするjs
結論：サイズの配列を作り、Size.whitelist に渡して Quill.register(Size, true) で登録します。同じ配列をツールバーの size にも渡します。
要点は次の4行です。
const fontSizeArr = ['12px', '14px', '16px', '20px', '24px', '32px'];
const Size = Quill.import('attributors/style/size');
Size.whitelist = fontSizeArr;
Quill.register(Size, true);whitelist に入れた文字列が、そのまま style="font-size: 14px;" として出力されます。単位まで含めて書いてください。'14' のように単位を省くと、CSSとして無効な値になり反映されません。
rem や em で指定することもできます。表示側でフォントサイズを相対的に扱いたい場合は、そちらのほうが扱いやすくなります。
const fontSizeArr = ['0.75rem', '1rem', '1.25rem', '1.5rem', '2rem'];選択肢を増やしすぎないほうが使いやすくなります。下記のソースコードでは14段階を並べていますが、実際に本文で使うのはせいぜい4〜5種類です。段階が多いとツールバーのドロップダウンが長くなり、書き手が毎回迷うことになります。
なお、attributors/style/size は style 属性として出力されるので、保存したHTMLをそのまま別のページで表示できます。attributors/class/size を使うと ql-size-14px のようなクラスになり、表示側にも対応するCSSが必要になります。Laravel でデータベースに保存して表示する使い方なら style を選んでください。
全体のソースコードは下記の通りです。
/**
関数： テキストエディタの生成
引数： 作成する場所のid
戻り値： Quillエディタの生成情報
**/
function quillEditor(make_id) {
const themes = set_themes();
// font-size
const fontSizeArr = ['8px','9px','10px','12px','14px','16px','20px','24px','32px','42px','54px','68px','84px','98px'];
const Size = Quill.import('attributors/style/size');
Size.whitelist = fontSizeArr;
Quill.register(Size, true);
// ツールバー機能の設定
const toolbarOptions = [
// 見出し
[{
'header': [1, 2, 3, 4, false]
}],
// フォント種類
[{
'font': []
}],
// フォントサイズ
[{
'size': fontSizeArr
}],
// 文字寄せ
[{
'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-sizeをカスタマイズするcss
結論：CSSを書かないと、追加したサイズがツールバーで空欄になります。content: attr(data-value) で、サイズの値そのものをラベルに出します。
Quill は既定の4段階にだけラベルを持っています。whitelist に 14px を追加しても、対応するラベルが無いため選択肢が空のまま並びます。
scssでの記述です。
.ql-snow,
.ql-bubble {
.ql-picker {
&.ql-size {
.ql-picker-label,
.ql-picker-item {
&::before {
content: attr(data-value) !important;
}
}
}
}
}テーマを切り替えている場合は .ql-snow だけでなく .ql-bubble にも当ててください。上のJavaScriptは画面幅でテーマを切り替えているため、スマートフォンでは .ql-bubble になります。.ql-snow だけに書いていると、スマートフォンでサイズの表示が空欄のままになります。
選択肢を実際の大きさで表示したい場合は、font-size も添えます。ただし段階が大きいと行の高さが崩れるので、上限を決めて指定してください。
.ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {
font-size: 14px;
}
この記事のコードを動かす前に
結論：この記事はQuillがすでに動いている前提のカスタマイズです。導入がまだなら先にそちらを済ませてください。
CDNの読み込みから new Quill() までの手順は、Laravelにリッチテキストエディタ『Quill』を実装するにまとめています。Quill 2.0 で配布元のURLが変わっているので、古い記事のCDNをコピーしてきた場合は動きません。
フォントの種類も同じ要領で増やせます。手順はエディタ『Quill』のfont-familyをカスタマイズするにまとめました。size の部分を font に置き換えるだけなので、まとめて設定してしまうのが楽です。
▼Quillのfont-familyをカスタマイズしたい方はこちらの記事をどうぞ
▼HTML/CSS/JavaScriptの学習本を探してる方はこちらの記事をどうぞ
