web-dev-qa-db-ja.com

QuillJSエディターにカスタムフォントサイズを追加する方法

QuillJSを使用してツールバーにカスタムフォントサイズを追加するにはどうすればよいですか？私は2つのアプローチを試しました：

// Initiate the editor
        let toolbarOptions = [
            ['bold', 'italic', 'underline', 'strike'],
            [{ 'align': [] }],
            [{ 'size': ['10px', '20px', '80px'] }],
            [{ 'color': ['#FFF'] }]
        ];
        this.editor = new Quill('#executive-control-editor', {
            modules: {
                toolbar: toolbarOptions
            },
            theme: 'snow'
        });

そして

<div id="toolbar">
        <span class="ql-formats">
            <button class="ql-bold"></button>
            <button class="ql-italic"></button>
            <button class="ql-underline"></button>
            <button class="ql-strike"></button>
        </span>
        <span class="ql-formats">
            <select class="ql-align"></select>
        </span>
        <span class="ql-format-group">
          <select title="Size" class="ql-size">
            <option value="10px">Small</option>
            <option value="13px">Normal</option>
            <option value="18px">Large</option>
            <option value="32px">Huge</option>
          </select>
        </span>
        <span class="ql-formats">
            <button class="ql-image"></button>
        </span>
    </div>

ただし、どちらも機能しません。ここに欠けているものはありますか？ "px"も値から削除してみました。まだ何もありません。

javascriptquill
10
James

今は少し変なので、これをクイル構成に追加するかもしれません。しかし今のところ、それが機能しない理由は、Quillがサイズ設定にデフォルトでクラスを使用し、必要なのはインラインスタイルであるためです。これは次の方法で変更できます。

var Size = Quill.import('attributors/style/size');
Quill.register(Size, true);

// Rest is the same
var editor = new Quill('#editor');
3
jhchen

上記の受け入れられた答えは私にとってはうまくいきませんでしたが、私を正しい軌道に乗せました。

テキストエディタでカスタムフォントサイズを設定する（およびCSSクラスではなく基になる値のフォントサイズのインラインスタイルを設定する）ために必要なことは次のとおりです。

var Size = Quill.import('attributors/style/size');
Size.whitelist = ['14px', '16px', '18px'];
Quill.register(Size, true);

var toolbarOptions = [
    [{ 'size': ['14px', '16px', '18px'] }],
];

var quill = new Quill("#quillElementSelector", {
    theme: 'snow',
    modules: {
        toolbar: toolbarOptions
    }
});

また、ツールバーのドロップダウンのラベルを上書きするようにCSSを変更する必要がありました。 CSSセレクターの「data-value」値は、上記で指定した値と一致する必要があることに注意してください。

.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {
    content: 'Normal';
    font-size: 14px !important;
}

.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
    content: 'Large';
    font-size: 16px !important;
}

.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before {
    content: 'Huge';
    font-size: 18px !important;
}
21
mfranchi