How to add custom classes to a custom button in TinyMCE?

user_2874194 0
Viewed 108

I want to add a custom class to a custom button in TinyMCE 6, however it doesn't seem to be possible anymore.

const setup = (editor: Editor, url: string): void => {
  editor.ui.registry.addButton('blue-box', {
    icon: 'table-cell-select-all',
    class: 'MyCoolBtn',  
    tooltip: "Blue Box",
    onAction: () => {
      editor.setContent('<p>content added from blue-box</p>');
    }
  });
};

In this example, I tried to add class: MyCoolBtn, however, I received an error because there's no class instance on the addButton method.

Is there any possibility to add a class or add a custom design to specific buttons in TinyMce 6?

tinymce
1 Answers

Looking through the Tiny 6 and Tiny 5 docs, I couldn't find a reference to the addButton API allowing a class value (sounds like a function from Tiny 4 or earlier?).

Anyway, I tested out the custom button, in Tiny 6 on a fiddle with your example button, and again in a local file, I while I didn't get any errors about a class instance not found for the addButton method, I did find that adding a class to the button was not carried through the rendered rich text editor. When Tiny runs, it adds classes to each element based on the CSS content specified by the default skin configured.

It is possible to override the .tox classes that the Tiny skin places for each element (as seen in the screen cap), but it's not recommended.

One solution, if you want to change the style of the specific, custom buttons added to the toolbar, is to make a custom skin with the specific style element needed set up and targeting that .tox-tbtn class.

TinyMCE custom button class

user_165512290
Related