如何向 QuillJS 編輯器添加自定義字體大小

Question

如何使用 QuillJS 向工具欄添加自定義字體大小？ 我嘗試了兩種方法：

// 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” ； 還是什么都沒有。

Answer 1

上面接受的答案對我不起作用，但讓我走上了正確的軌道。

這是我必須做的讓文本編輯器設置自定義字體大小（並且還在底層值而不是 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 選擇器中的“數據值”值必須與上面指定的值匹配。

.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;
}

Answer 2

現在有點奇怪，所以我可以將它添加到 Quill 配置中。 但是現在，它不起作用的原因是 Quill 默認使用類來調整大小，而您想要的是內聯樣式。 您可以通過以下方式更改：

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

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

Answer 3

搭載@mfranchi 和@pmarreck，我得到了一個標准的“MS Word”字體大小列表，其中包含以下內容：

const fontSizeArr = ['8px','9px','10px','12px','14px','16px','20px','24px','32px','42px','54px','68px','84px','98px'];

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

var toolbarOptions = [
    [{ 'size': fontSizeArr }],
];

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

這是我發現的這個Quill 問題的純 CSS 解決方案：

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