How to add custom font sizes to QuillJS editor
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 samevar editor = new Quill('#editor');