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.
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;
}
Piggybacking off @mfranchi and @pmarreck, I got a standard “MS Word” font size list with the following:
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',
});
Here’s a pure CSS solution that I found as this Quill issue:
.ql-snow{
.ql-picker{
&.ql-size{
.ql-picker-label,
.ql-picker-item{
&::before{
content: attr(data-value) !important;
}
}
}
}
}
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');
