How to add custom font sizes to QuillJS editor

Question

How do you add custom font sizes to the toolbar with QuillJS? I've tried two approaches:

// 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'         }); 

and

<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> 

However neither of them work. Is there something I'm missing here? I've tried removing the "px" from the value as well; still nothing.

Answer 1

The accepted answer above didn't work for me but put me on the right track.

Here is what I had to do to have the text editor set custom font sizes (and also set inline styles for the font-size in the underlying value instead of a CSS class):

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

I also had to modify my CSS to override the labels on the toolbar dropdown. Note that the "data-value" values in the CSS selectors must match the values specified above.

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