James James - 1 month ago 43
Javascript Question

How to add custom font sizes to QuillJS editor

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

It's a bit weird right now so I may add this into a Quill configuration. But for now, the reason it's not working is Quill uses classes by default for sizing and what you want is inline styles. You can change this with:

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

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