Add styling to a custom menu item in TinyMCE 5

Question

I want to add some styling to a custom menu item in TinyMCE 5. Can I add a CSS class to the item or can I add some inline styles?

Here is a fiddle with the basic code to create a custom menu item - because it does not seem to work here:

https://jsfiddle.net/bhdwtp3m/

tinymce.init({
  selector: '#mytextarea',
  menu: {
        custom: { title: 'Custom Menu', items: 'undo redo myCustomMenuItem' }
    },
    menubar: "file | edit | custom",
    setup: function (editor) {
        editor.ui.registry.addMenuItem('myCustomMenuItem', {
            type: 'menuitem',
            text: 'Custom menu item',
        });
    }
});

<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<textarea id="mytextarea">Hello, World!</textarea>

Answer 1

Sorry to say but there is no supported way to style individual toolbar buttons in TinyMCE by means of adding classes or IDs. The reason is in the nature of CSS – it's right there in the name: cascading... If the TinyMCE CSS changes, it will bleed into any third party UI, possibly breaking it. Sometimes we also need to change the DOM structure of UI components.

While many developers know exactly how handle this, there are many that will hang themselves with all the rope given to them. Also we have a substantial number of customers running TinyMCE off our cloud, thus always running the latest version. If they do custom styling like this, TinyMCE might break for them without warning, and we cannot have that.

If you know what you are doing, I suggest investigating CSS pseudo class selectors like :nth-child() and :nth-of-type()