TinyMCE classes

[_Roy_]

I'm running into an issue with the TinyMCE integrated in Processwire.

I have a front-end that uses bootstrap 5.3, and the classes that TinyMCE uses for certain thing are different to the classes that Bootstrap uses. For example, if you align text to the right, it will add a class "align_right", whereas bootstrap uses "text-end". I can change the classes for this in the code, but then the TineMCE-window doesn't show the alignment because it does not react to the new classname.

I understand that Processwire is headless, and as such cannot take all different front-end options into account, but wouldn't it then be better to not use classes for this, but instead use inline CSS? That works within all front-end frameworks as far as I know. Because it now uses classnames, it is catering to 1 specific front-end option in my opinion.

Edited February 27 by _Roy_
clarification

[AndZyk]

Hello @_Roy_,

you have to add or change the styles in the module settings, so that you can see it in the editor:

https://processwire.com/blog/posts/using-tinymce-6-in-processwire/#customizing-the-styles-dropdown
https://processwire.com/blog/posts/using-tinymce-6-in-processwire/#adding-extra-css-styles-without-adding-to-em-styles-em-dropdown

You are right, ProcessWire doesn't know what framework you are using. That is why you have to tell the editor which classes of your framework you want to use.

Regards, Andreas

[_Roy_]

Thanks for the links @AndZyk! I'll have to read through them to see if this does what I want.

I was able to change the actual classes that are applied by the dropdown, but then it obviously did not show up in the editor, so that is the part I'm hoping to find an answer for.