TinyMCE one class per element.

[elabx]

I am using TinyMCE to define UIkit buttons, but have come across the issue that editors end up with buttons that look like:

"uk-button uk-button-primary uk-button-secondary"

Because it merges all the added classes, when ideally i'd only want uk-button-primary OR uk-button-secondary

I see it's discussed here what to do and didn't really understand so wanted to ask if someone knows the details on how to configure this in ProcessWire.

https://github.com/tinymce/tinymce/issues/4035

Thanks in advance!

[Robin S]

TinyMCE itself supports this via the style_formats setting, where you would define a "class" value rather than a "classes" value, e.g.

style_formats: [
    { title: 'Table row 1', selector: 'tr', class: 'tablerow1' }
  ]

But PW's implementation of TinyMCE doesn't provide a way to directly control this setting and instead parses the contents of the "Custom style formats CSS" config textarea into the style_formats setting.

Situations like this are why I think PW should provide a hookable method allowing the array of data that becomes the TinyMCE settings to be modified at runtime, as mentioned in this issue: https://github.com/processwire/processwire-issues/issues/1981