Customizing context menu in TinyMCE 4.0

Question

I have been using editor.plugins.contextmenu.onContextMenu.add to customize the contextmenu plugin in TinyMCE 3.x but cannot use it in version 4.0

Here is the error I receive:

TypeError: a.plugins.contextmenu.onContextMenu is undefined

and my code for plugin is:

tinymce.PluginManager.add("example", function(a,b) {
  a.plugins.contextmenu.onContextMenu.add(function(th, menu, event) {
    //my code for customizing contextmenu
  })
  a.addButton("exampleHelp", {
  text : "help",
  icon : !1,
  onclick : function() {
    //some code
  }
  })    
});

Does it relate to init function which I had been using in version 3.X?

EricP · Accepted Answer · 2013-10-18 20:56:52Z

I was able to reverse engineer a solution by looking at the table plugin code.

tinymce.init({
    plugins: "contextmenu",
    contextmenu: "link image inserttable | cell row column deletetable | myMenuItem"
});


// Inside plugin
editor.addMenuItem('myMenuItem', {
    text: 'My Menu Item',
    context: 'div', // not sure what this does
    onPostRender: postRender,
    onclick: function() { console.log('hi!'); }
});

// Determine whether menu item is visible
function postRender() {
    handleDisabledState(this, 'div.myCustomItem');
}

function handleDisabledState(ctrl, selector) {
    function bindStateListener() {
        ctrl.visible(editor.dom.getParent(editor.selection.getStart(), selector));
        editor.selection.selectorChanged(selector, function(state) {
            ctrl.visible(state);
        });
    }

    if (editor.initialized)
        bindStateListener();
    else
        editor.on('init', bindStateListener);
}

So the context menu should only render if it's inside a div.myCustomItem element. If you want the context menu item to always be visible, comment out handleDisabledState()

Ali Khalili · Accepted Answer · 2013-06-20 12:40:31Z

For now I found a temporary solution:

a.on("contextmenu",function(n){
// console.log($(a.getDoc()).find(' .mce-floatpanel.mce-menu'));
// find a way to add it into current context menu instead of deleting it
$(a.getDoc()).find(' .mce-floatpanel.mce-menu').remove();
var i;
var o=[]
o.push({text:'option1'})
o.push({text:'option2'})
o.push({text:'menu option', menu:o})
t=new tinymce.ui.Menu({items:o,context:"contextmenu"}),t.renderTo(document.body)
// fix positioning
var r={x:n.pageX,y:n.pageY};
a.inline||(r=tinymce.DOM.getPos(a.getContentAreaContainer()),
r.x+=n.clientX,r.y+=n.clientY),t.moveTo( r.x,r.y),
a.on("remove",function()  {t.remove(),t=null})
})

I remove the default context menu and replace it with my customized menu. But I still need to know how I can add my items to default context menu

Nicolas · Accepted Answer · 2017-11-09 17:43:47Z

0

I found a solution on how to customise TinyMCE's (4.1.9) contect menu on the fly, see my response and proposed solution on this page: http://archive.tinymce.com/forum/viewtopic.php?pid=116109#p116109

Thanks, Nic

edited Nov 9, 2017 at 17:43

answered Apr 25, 2015 at 10:21

Nicolas

361 silver badge5 bronze badges

1 Comment

Nicolas Over a year ago

Link corrected. Sorry, I only just saw this comment!

Collectives™ on Stack Overflow

Customizing context menu in TinyMCE 4.0

3 Answers 3

Comments

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Related