CODEWITHSUNDEEP
javascripttinymcetinymce-4tinymce-plugins
Preben
Preben

Reputation: 1277

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

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?

Upvotes: 0

Views: 1131

Answers (1)

Michael Fromin
Michael Fromin

Reputation: 13744

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.

Upvotes: 1

Related Questions