TinyMCE font size select, initial value is with unit (16px) even though fontsize_formats are values (small, medium, …)

user_7640511 0
Viewed 462

I'm using TinyMCE as WYSIWYG text editor and I'd like users to choose the font size among certain values (small, medium, large, …) and not size with unit (12px, 14px, …) so far I use the following code

tinymce.init({
    // …
    toolbar: [
        '… | fontsizeselect',
    ],
    content_style: "body { font-size: medium }",
    fontsize_formats: 'small medium large',
});

It works fine except that before one select the font size for the first time the menu bar shows 16px.

enter image description here

Is there a way that at this point we see 'medium' and not 16px?

Once one has picked a size, the 16px is not proposed in the dropdown anymore... unless the content is deleted then font size select shows 16px again.

Thank in advance for your help.

tinymce javascript
1 Answers

That select list will show you the current font size where the cursor is located even if that is not an option that is available for selection.

I have made a simple TinyMCE Fiddle that shows this behavior with some more explanation:

https://fiddle.tiny.cloud/OFhaab

The fiddle sets a "default" font size via CSS:

content_style: `
    p {
        font-size: 15pt;
    }
`

...but 15pt (which is the same as 20px) is not one of the options in the font size select list. When TinyMCE first loads it is showing you to font size of the beginning of the content. If you click the select list you will see that 15pt/20px is not an option you can select but it shows that value because that is indeed the font size of the current content. If you click elsewhere in the content you will see that select list change to always show you the font size of the currently selected content (e.g. where the cursor is located) but the options to select from are limited to what you provide via TinyMCE configuration (or our defaults if you don't provide any via configuration.

user_16037460
Related