javascript - How to use the default font size selector with custom Quill toolbar? - Stack Overflow

admin管理员组

文章数量:1391977

The normal/default Quill editor uses this kind of size editor:

I am building a custom toolbar using the tools provided by Quill. That looks like this:

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

['size'] is invalid syntax, as nothing shows on the toolbar if you use that:

If I alter the 'size' array to be [{ size: ['10px', '12px' ... }] etc, the dropdown ends up looking like this:

How can I use the default size that es with the editor in a custom configuration of options?

The normal/default Quill editor uses this kind of size editor:

I am building a custom toolbar using the tools provided by Quill. That looks like this:

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

['size'] is invalid syntax, as nothing shows on the toolbar if you use that:

If I alter the 'size' array to be [{ size: ['10px', '12px' ... }] etc, the dropdown ends up looking like this:

How can I use the default size that es with the editor in a custom configuration of options?

• javascript
• quill

Share Improve this question Follow edited Feb 13, 2022 at 15:01 James Stewart asked Feb 13, 2022 at 14:58 James StewartJames Stewart 1,06422 gold badges1414 silver badges3636 bronze badges 1

• Did you find a solution to show the default 'size' element in a custom toolbar? – Sebi Commented Jan 3 at 11:25

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

You can override the editor's CSS to change the content of the labels and font sizes. The custom style will take precedence when added after the stylesheet. I left the default values mented in the snippet below.

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./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./1.3.6/quill.js"></script>

for each size in css change label

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before {
    content: "12px";
}

本文标签： javascriptHow to use the default font size selector with custom Quill toolbarStack Overflow