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', 'under

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

Solution 2:

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

Solution 3:

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 samevar editor = new Quill('#editor');