Rich Text Editor font size options

Help & Support 💻
1

Hello,

I’ve been trying to add more font sizes to the Rich Text Editor than the standard four (small, normal, large, huge). I was able to add more as an option, using this for the Toolbar options:

[
  [{ size: ['10px','12px','14px','16px','18px','20px','22px','24px'] }],
  ['bold', 'italic', 'underline', 'strike'],
  [{ list: 'ordered' }, { list: 'bullet' }, { align: [] }],
  [{ color: [] }, { background: [] }],
  ['clean'],
]

and this CSS:

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value]::before {
  content: attr(data-value) !important;
}

This does add a select with the options

image
image234×303 4.84 KB

But selecting any option doesn’t do anything.
I think this cannot be done from the options available in the editor. I think what’s missing is registering the sizes to the Quill object, which we don’t have any access to.

var Size = Quill.import('attributors/style/size');
Size.whitelist = ['14px', '16px', '18px'];
Quill.register(Size, true);

If anyone knows more or how to do it, please let me know! Thanks :slight_smile:

2

Hi @Max

You’re correct: adding values to Toolbar options only creates the dropdown. UI Bakery’s Rich Text Editor doesn’t currently expose the Quill registration API, so custom values such as 12px or 18px aren’t applied.

As a workaround, you can use Quill’s four built-in sizes and customize their appearance with CSS:

.ql-editor .ql-size-small {
  font-size: 12px;
}

.ql-editor {
  font-size: 14px;
}

.ql-editor .ql-size-large {
  font-size: 18px;
}

.ql-editor .ql-size-huge {
  font-size: 24px;
}

Configure the toolbar with the supported values:

[
  [{ size: ['small', false, 'large', 'huge'] }],
  ['bold', 'italic', 'underline', 'strike'],
  [{ list: 'ordered' }, { list: 'bullet' }, { align: [] }],
  [{ color: [] }, { background: [] }],
  ['clean'],
]

This allows four customized size levels. Arbitrary additional font sizes aren’t currently available through the Rich Text Editor settings.

Hope this helps!

1 Like
3

I was thinking this would be the case. Sadly, for my use case, I need a dynamic range of sizes. Thank you :slight_smile:

1 Like