Question

我一直在使用editor.plugins.contextmenu.onContextMenu.add自定义TinyMCE 3.x中的 contextmenu 插件，但无法在4.0版中使用它

以下是我收到的错误：

TypeError: a.plugins.contextmenu.onContextMenu is undefined

我的插件代码是：

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

它与我在3.X版中使用的init函数有关吗？

Answer 1

通过查看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);
}

因此，只有在div.myCustomItem元素内部才能呈现上下文菜单。如果希望上下文菜单项始终可见，请注释掉handleDisabledState（）

Answer 2

现在我找到了一个临时解决方案：

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

我删除了默认的上下文菜单，并将其替换为我的自定义菜单。但我仍然需要知道如何将我的项目添加到默认上下文菜单

Answer 3

我找到了如何动态定制TinyMCE（4.1.9）竞赛菜单的解决方案，请参阅此页面上的回复和建议的解决方案：http://archive.tinymce.com/forum/viewtopic.php?pid=116109#p116109

谢谢， NIC

在TinyMCE 4.0中自定义上下文菜单

3 个答案: