如何將默認字體大小選擇器與自定義 Quill 工具欄一起使用？

Question

普通/默認的 Quill 編輯器使用這種大小的編輯器：

我正在使用 Quill 提供的工具構建自定義工具欄。 看起來像這樣：

        const toolbarOptions = [
            [
                { font: ['Lato,sans-serif'] },
            ],
            ['size'],
            ['bold', 'italic', 'underline'],
            ['link'],
            ['clean'],
        ];

['size']是無效語法，因為如果您使用它，工具欄上不會顯示任何內容：

如果我將 'size' 數組更改為[{ size: ['10px', '12px'... }]等，下拉列表最終如下所示：

如何在選項的自定義配置中使用編輯器附帶的默認大小？

Answer 1

您可以覆蓋編輯器的 CSS 以更改標簽和字體大小的內容。 在樣式表之后添加時，自定義樣式將優先。 我在下面的代碼片段中留下了注釋的默認值。

 const toolbarOptions = [ [ { font: ['Lato,sans-serif'] }, ], [{ 'size': ['small', false, 'large', 'huge'] }], ['bold', 'italic', 'underline'], ['link'], ['clean'], ]; const quill = new Quill('#editor', { theme: 'snow', modules: { toolbar: toolbarOptions } });

 <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet"> <style>.ql-container { box-sizing: border-box; font-family: Helvetica, Arial, sans-serif; /* font-size: 13px; */ font-size: 12px; height: 100%; margin: 0px; position: relative; }.ql-editor.ql-size-small { /* font-size: 0.75em; */ font-size: 10px; }.ql-editor.ql-size-large { /* font-size: 1.5em; */ font-size: 14px; }.ql-editor.ql-size-huge { /* font-size: 2.5em; */ font-size: 16px; }.ql-snow.ql-picker.ql-size.ql-picker-label::before, .ql-snow.ql-picker.ql-size.ql-picker-item::before { /* content: 'Normal'; */ content: '12px'; }.ql-snow.ql-picker.ql-size.ql-picker-label[data-value=small]::before, .ql-snow.ql-picker.ql-size.ql-picker-item[data-value=small]::before { /* content: 'Small'; */ content: '10px'; }.ql-snow.ql-picker.ql-size.ql-picker-label[data-value=large]::before, .ql-snow.ql-picker.ql-size.ql-picker-item[data-value=large]::before { /* content: 'Large'; */ content: '14px'; }.ql-snow.ql-picker.ql-size.ql-picker-label[data-value=huge]::before, .ql-snow.ql-picker.ql-size.ql-picker-item[data-value=huge]::before { /* content: 'Huge'; */ content: '16px'; }.ql-snow.ql-picker.ql-size.ql-picker-item[data-value=small]::before { font-size: 10px; }.ql-snow.ql-picker.ql-size.ql-picker-item[data-value=large]::before { /* font-size: 18px; */ font-size: 14px; }.ql-snow.ql-picker.ql-size.ql-picker-item[data-value=huge]::before { /* font-size: 32px; */ font-size: 16px; } </style> <div id="editor"> <p>Hello World:</p> <p>Some initial <strong>bold</strong> text</p> <p><br></p> </div> <script src="https.//cdn.quilljs.com/1.3.6/quill.js"></script>