TinyMCE v4 adding custom items to the contextmenu

Question

I'm upgrading TinyMCE on one of my websites and am trying to add a custom item to the contextmenu plugin. I can't seem to be able to find any documentation for it since all I can find is for v3.

I was easily able to add a custom link to the contextmenu in the last version but because TinyMCE has changed so much I'm having a hard time adding the new one. Can anyone point me to the correct documentation?

I used to use the following in the last version:

ed.addCommand('fileMan', function(e) {
    fileman();
    hide(ed, e);
});

m.add({title : 'Filemanager', icon : 'image', cmd : 'fileMan'});

Answer 1

I was able to figure this out. Here is what I did:

• Created a new folder in the plugin directory called fileman
• Created a file named plugin.js and added the code at the end of this post to it
• Minifed the code and put the minified code in plugin.min.js
• Edited plugin.min.js in the contextmenu plugin folder and added fileman to the list of loaded plugins
• Added fileman to the list of loaded plugins when initializing the editor

Code:

tinymce.PluginManager.add('fileman', function(editor) {
    editor.addMenuItem('fileman', {
        icon: 'image',
        text: 'Filemanager',
        shortcut: 'Ctrl+J',
        onclick: function() {
            fileman.launch('editor');
        },
        context: 'insert',
        prependToContext: true
    });
});

Answer 2

This is somewhat tricky solution but the perfect one, worked for me after trying lot of things.

editor.on('contextmenu', function(editor) {

this.settings.contextmenu = 'fileman | link openlink image inserttable | cell row column deletetable';

var exampleMenuItem = this.menuItems['italic'];
this.menuItems['fileman'] = exampleMenuItem;

this.menuItems['fileman'].cmd = 'mceFileMan';
this.menuItems['fileman'].icon = '../../file-icon.png';
this.menuItems['fileman'].text = 'File Manager';

});