TinyMCE - put plugins in a dropdown? (Custom Toolbar Menu Button)

Question

I have 4 different plugins for handling images in TinyMCE 4, plus a lot of other plugins. I would like to make things a lot more tidy/ clean.

Is is a way to add existing plugins to a dropdown menu in TinyMCE 4?

I know of this method to create dropdowns for new stuff: https://www.tinymce.com/docs/demo/custom-toolbar-menu-button/

In the init:

setup: function(editor) {
    editor.addButton('mybutton', {
      type: 'menubutton',
      text: 'My button',
      icon: false,
      menu: [{
        text: 'Menu item 1',
        onclick: function() {
          editor.insertContent('&nbsp;<strong>Menu item 1 here!</strong>&nbsp;');
        }
      }, {
        text: 'Menu item 2',
        onclick: function() {
          editor.insertContent('&nbsp;<em>Menu item 2 here!</em>&nbsp;');
        }
      }]
    });
  },

BUT I do not understand how to add plugins in there. Like the plugin "image" or "link".

Anybody knows?

Michael Fromin Michael Fromin · Accepted Answer · 2016-07-05T15:27:23

Each plugin has its own JS file and you will see code in each plugin for how it makes its capabilities available. It may add toolbar buttons, complete menus, menu items in existing menus, etc. If you want to change where things appear in the menus/toolbars you will need to modify that code in each plugin. For example you will find this in the link plugin's code:

editor.addButton('link', {
    icon: 'link',
    tooltip: 'Insert/edit link',
    shortcut: 'Meta+K',
    onclick: createLinkList(showDialog),
    stateSelector: 'a[href]'
});

editor.addButton('unlink', {
    icon: 'unlink',
    tooltip: 'Remove link',
    cmd: 'unlink',
    stateSelector: 'a[href]'
});

editor.addShortcut('Meta+K', '', createLinkList(showDialog));
editor.addCommand('mceLink', createLinkList(showDialog));

this.showDialog = showDialog;

editor.addMenuItem('link', {
    icon: 'link',
    text: 'Insert/edit link',
    shortcut: 'Meta+K',
    onclick: createLinkList(showDialog),
    stateSelector: 'a[href]',
    context: 'insert',
    prependToContext: true
});

If you want to change what buttons/menus are added or where they appear you need to modify the relevant code in each plugin file.

TinyMCE - put plugins in a dropdown? (Custom Toolbar Menu Button)

1 Answers