Search code examples
javascriptjqueryweb-applicationstinymce-4tinymce-5

Tinymce 5.6.2 Append button names to toolbar buttons

I am using Tinymce 5.6.2, here in toolbar we have buttons for certain actions(cut, copy paste, bold etc.). My question is that I want to add button labels(as few people may not understand the button action from its icon). How can we do it.

In tinymce 4.x we had different classes for each button for ex mce-i-undo mce-i-redo mce-i-cut mce-i-copy etc and I was able to append button labels using these class names.

But now in tinymce 5.6.2 there is no such distinction between the buttons. Any Idea how I can manage to label these toolbar buttons? Thanks in advance

New image With TinyMCE 5.6.2

With TinyMCE 5.6.2.

Old With TinyMCE 4.x(this is what I want to achive)

With TinyMCE 4.x

Solution

  • We can have custom text to buttons as follows.

    tinymce.init({
  selector: '#editor',
  toolbar: 'myCustomToolbarButton',
  setup: function (editor) {
    editor.ui.registry.addButton('myCustomToolbarButton', {
      text: 'My Custom Button text',
      onAction: function () {
        alert('Button clicked!');
      }
    });
  }
});

    https://www.tiny.cloud/docs/ui-components/toolbarbuttons/#howtocreatecustomtoolbarbuttons