Additional Font selections in TinyMCE

[Ainz]

So we can always resort to system fonts and CSS styling to modify what we see, but for those who just want to have a number of fonts and sizes readily available from the TinyMCE editor, will this work: https://www.tiny.cloud/blog/tinymce-custom-font-family/ ?

I also read this article about font sizes and such https://getpublii.com/docs/fonts.html but the selection of fonts is sitewide, instead of being available in content creation, which I would prefer. I understand why, and the default should always fall back to the globally selected font, but I have some cases where I just need to select another font in another size... like tables or some lists.

Any other suggestions for this? Can we successfully edit the TinyMCE files? Will they be overwritten by Publii updates?

[miditaur]

[Ainz]

You got that right. :)
And of course including the Publii fonts that are available.

[miditaur]

You need to add the following items to the standard list of items in the second row of the toolbar in the tinymce.override.json file - fontselect fontsizeselect
Here are the instructions https://getpublii.com/dev/how-to-add-custom-config-or-js-for-post-editor/ , but if you don't succeed, I will help you.

[Ainz]

That page is a 404

[Ainz]

👍 see it thanks

[GetPublii]

Just to add - these fonts won’t be included with your website, so they will only be displayed if the visitor has them installed on their OS. Generally, they are quite popular and available across various operating systems, but not always, and not all of them, especially when it comes to mobile devices.

[miditaur]

In my personal opinion, the issue of the availability of fonts in users' operating systems should not worry us, otherwise it will lead us into such a mess that we will go crazy! 😱
In any case, if a font is missing, the browser will replace it with an available one, and this will not significantly change the reader's positive impression of the content they need.
For example, using the clamp() function in CSS is also a rhetorical question, but if you are looking to the future, you can use it.
The Publii developers have done a great job by providing the ability to work with the TinyMCE editor configuration! Personally, for me this is very wonderful! 🥇I'm actually surprised I didn't come across Publii before!
But the presence of Cyrillic support in Publii fonts is another issue that you need to pay attention to! I have to remove fonts that don't support the Ukrainian language from the theme and settings, which takes a lot of time. 🙇
In this topic, we are considering the possibility of adding the ability to select fonts and their sizes to the editor toolbar, we will help the author of the topic to deal with this issue.

[Ainz]

Windows has a list of default fonts that I listed somewhere some time ago, Helvetica, as an example, is not among them.
Actually I was wrong about Helvetica...

I have not done any of this yet.

I also like fonts and have a local collection of 10744 fonts, but most are not very usable of course.

[Ainz]

ok

1

Then please add in the theme root directory the following files:

tinymce.override.json - it will allow you to override default TinyMCE configuration,
tinymce.script.js - it will run your JS code after post editor initialization.

What content should those files have?

2

What is the implication of this

If you want to allow some custom tags in the TinyMCE editor - since Publii v.0.38.0 you can do it under site settings.

I see no option to add custom json code in site settings.

Which leads me here: https://getpublii.com/docs/website-settings.html#editors

So I can use above mentioned code in those text inputs?

[miditaur]

To solve your problem, you only need the tinymce.override.json file.
We only need to add these two items to the second toolbar - fontselect fontsizeselect
This is what the modified code for tinymce.override.json will look like

{
"toolbar2": "styleselect formatselect fontselect fontsizeselect codesample searchreplace hr readmore undo redo restoredraft removeformat sourcecode",
}

Don't forget to add the following section to your theme's config.json file:

"extensions": {
"postEditorConfigOverride": true,
"postEditorCustomScript": true
},

Otherwise, there will be no changes!

[Ainz]

As @GetPublii states there are forms for this in the Site Settings > Editor so I am no after adding files if it can be handled by the interface.

Testing this but it is not working