Quill: Default font-size for wrapping tag

[rachelrab]

Hi,
I have the following use case:
I have a react js web page that enables editing html using a rich text editor.
The html value is then saved by a server and sent to somewhere else that displays it.
I am trying to set a default font-size to the parent element from the web page.
So I've created a toolbar and set selected on font-size "16px". The thing is, the selected value is a value that is just not added to the html.
So how do I make an actual default font-size ? one that would appear in the style of the wrapping element.
I've tried overwriting a lot of things but nothing seems to make it happen.
I'm going to move this logic to the server, but still wonder what I can do in order to have control over that.

Expected behavior:
I expect to have a result of an html looking like that:
<p><span style="font-size: 16px;">some text</span></p>
without selecting anything.

Actual behavior:
<p>some text</p>

Version:
"[email protected]"

[benbro]

You can change the default font size with css:

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

An example how to use inline style instead of class and add a custom size like 16px to the list.

[rachelrab]

I tried what you sent, it's not what I need.
I need the default to actually appear on the html resulted
meaning, when the default is 16px, and I write in the control "some text", the html value should be:
<p><span style="font-size: 16px;">some text</span></p>

[jhchen]

This is not a use case Quill encourages. You can accomplish something like it with a custom attributor, but you would be going against the grain. Quill expects a 1:1 mapping between data and its markup so if your content is "some text", the valid markup for it cannot be simulaneously be <p><span>some text</span></p> and <p><span style="font-size: 16px;">some text</span></p>. In fact in the default Quill package the former is not even allowed as <p>some text</p> is correct.

[haoksam]

I tried what you sent, it's not what I need.
I need the default to actually appear on the html resulted
meaning, when the default is 16px, and I write in the control "some text", the html value should be:
<p><span style="font-size: 16px;">some text</span></p>

Have you found any solution/workaround for this? Asking for a friend...

[velum]

This is extremely annoying. I want to be able to create some html snippets to be inserted elsewhere using quill.js and I don't want the wrapping HTML to affect the snippet font-size. These snippets can be inserted at various places, and I would prefer not to have to modify the CSS or HTML of the containers.