How can I add a dynamic context menu to tinyMCE?

Question

Is there a way to add custom dynamic elements to the context menu in tinyMCE 4.x, after init? I created custom menu items but many of them have sub-items that are dependent on other things going on in my application.

I tried using editor.on('contextmenu') but the menu still does not update. Any ideas?

Answer 1

1. Add the contextmenu plugin
2. Override the default context menu (some plugins automatically add their own entries) by defining the contextmenu option. It is a pipe-delimited list of custom menu items (which you define in step 3)
3. Define a list of custom menu items. These can have their own onclick event handlers, or define sub-menus.

---

tinymce.init({
    ...
    plugins: [..., 'contextmenu'],
    contextmenu: 'customItem1 | customItem2',
    setup: function (editor) {
        editor.addMenuItem('customItem1', {
            text: 'Menu Item 1',
            context: 'tools',
            onclick: function () {
                alert('Menu item 1 clicked');
            }
        });
        editor.addMenuItem('customItem2', {
            text: 'Menu Item 2',
            context: 'tools',
            menu: [ {
                text: "Sub-menu item 1",
                onclick: function () {
                    alert('Sub-menu item 1');
                }
            }, {
                text: "Sub-menu item 2",
                onclick: function () {
                    alert('Sub-menu item 2');
                }
            }]
        });
    }
});

References:

• TinyMCE addMenuItem
• TinyMCE contextmenu plugin doc
• Custom menu item blog post
• Similar SO question