开发者

TinyMCE add item to context menu

开发者 https://www.devze.com 2023-03-17 23:35 出处:网络
I want to add a new menu item to TinyMCE\'s context menu, and perform a command when the user clicks it, so far i have this, which is not working:

I want to add a new menu item to TinyMCE's context menu, and perform a command when the user clicks it, so far i have this, which is not working:

tinyMCE.init({
...

setup : function(ed) {
    ed.onContextMen开发者_如何学运维u.add(function(ed, menu) {
        menu.add({title : 'Menu 1', onclick : function() {
            alert('Item 1 was clicked.');
        }});
    });
}

The code above throws an error saying "menu.add is not a function", if i remove the menu.add stuff and place a console.log(menu), it returns "contextmenu" upon opening the context menu.

What would be the right way to add an item to the context menu ? Preferably without having to modify the plugin itself. Thanks in advance.


You will need something like

ed.onContextMenu.add(function(ed, e) {

if (!e.ctrlKey) {

    // Restore the last selection since it was removed
    if (lastRng)
        ed.selection.setRng(lastRng);

    var menu = this._getMenu(ed);

    if ((typeof menu).toLowerCase() == 'object')
    {
        menu.showMenu(e.clientX, e.clientY);

        Event.add(ed.getDoc(), 'click', function(e) {
            hide(ed, e);
        });
        Event.cancel(e);
    }
}

});

and the function _getMenu where you may insert contextmenu options:

//example this will only display if an image was clicked
if (node !== "undefined" && node.nodeName.toLowerCase() == 'img') {

m.add({
    title: 'my menu',
});


m.addSeparator();

// Inline-Element editieren
m.add({
    title: 'to be choosen1',
    icon: 'http://...',
    cmd: 'undo'
});

t.onContextMenu.dispatch(t, m, el, col);

return m;
}

EDIT:

you can get the default menu using (the plugin contextmenu needs to be active)

var editor = tinymce.get(editor_id);
var menu = editor.plugins.contextmenu._getMenu(editor);

adding an entry to the menu should work as follows

menu.add({title : 'undo', icon : 'undo', cmd : 'Undo'});

it might be necessary to render the menu explicitly using showMenu. Another way to insert a menu to the contextemenu is to modify the editor_plugin.js in the tiny_mce/plugins/contextemneu directory and add the entry directly. You may also copy the plugin, modify and rename it - let it work as a custom plugin.


You can add context menu like this:

setup : function(ed) {
    ed.onContextMenu.add(function(ed, menu) {
        displayContextMenu(ed,e);
        }});
    });
}

function displayContextMenu(ed,e){
    var m = ed.plugins.contextmenu._getMenu(ed);
    m.add({title : 'advanced.bold_desc', icon : 'bold', cmd : 'bold'});
}
0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号