添加项目到上下文菜单

TinyMCE add item to context menu

本文关键字：菜单 上下文 项目 添加      更新时间：2023-09-26

我想在TinyMCE的上下文菜单中添加一个新的菜单项，并在用户单击它时执行命令，到目前为止，我有这个，这是不工作的:

tinyMCE.init({
...
setup : function(ed) {
    ed.onContextMenu.add(function(ed, menu) {
        menu.add({title : 'Menu 1', onclick : function() {
            alert('Item 1 was clicked.');
        }});
    });
}

上面的代码抛出"menu"错误。"Add is not a function"，如果我删除了菜单。添加内容并放置console.log(menu)，它在打开上下文菜单时返回"contextmenu"。

将一个项目添加到上下文菜单的正确方法是什么?最好不必修改插件本身。

你需要一些像

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);
    }
}
});

和函数_getMenu，你可以在其中插入上下文菜单选项:

//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;
}
编辑:

你可以使用(插件的contextmenu需要激活)

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

向菜单中添加条目应该如下所示

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

可能需要使用showMenu显式呈现菜单。将菜单插入上下文菜单的另一种方法是修改tiny_mce/plugins/contextemneu目录中的editor_plugin.js并直接添加条目。你也可以复制插件，修改和重命名它-让它作为一个自定义插件。

您可以这样添加上下文菜单:

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'});
}
相关文章：