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

[elabx]

So I realized I could use a custom json configuration file (very handy!) and added my style_formats like this:

{
  style_formats: [
    {
      "title": "Buttons",
      "items": [
        {
          "title": "Default Button",
          "selector": "a",
          "class": "uk-button uk-button-default"
        },
        {
          "title": "Primary Color Button",
          "selector": "a",
          "class": "uk-button uk-button-primary"
        },
        {
          "title": "Secondary Color Button",
          "selector": "a",
          "class": "uk-button uk-button-secondary"
        },
        {
          "title": "Link Button",
          "selector": "a",
          "class": "uk-button uk-button-link"
        },
        {
          "title": "Large Button",
          "selector": "a",
          "classes": "uk-button-large"
        },
        {
          "title": "Small Button",
          "selector": "a",
          "classes": "uk-button-small"
        }
      ]
    }
   ]
}

But the editor shows up like this:

 

 

[elabx]

The correct answer is to use the attributes:

{
  "title": "Buttons",
  "items": [
    {
      "title": "Default Button",
      "selector": "a",
      "attributes" : { "class" : "uk-button uk-button-default"}
    },
    {
      "title": "Primary Color Button",
      "selector": "a",
      "attributes" : { "class" : "uk-button uk-button-primary"}
    },
    {
      "title": "Secondary Color Button",
      "selector": "a",
      "attributes" : { "class" : "uk-button uk-button-secondary"}
    },
    {
      "title": "Link Button",
      "selector": "a",
      "attributes" : { "class" : "uk-button uk-button-link"}
    },
    {
      "title": "Link text",
      "selector": "a",
      "attributes" : { "class" : "uk-button uk-button-text"}
    }
  ]
}