在tinymce 4中，会显示菜单栏，但每个菜单仅在点击时呈现。
为了说明这一点，请注意菜单栏中的每个菜单都有mce-menu类。
在任何时候，如果没有菜单打开，如果您尝试获取菜单集，那么您将失败，因为它们尚未呈现：
var menuSet = $('.mce-menu');
// menuSet.length : 0
但是，如果您单击菜单栏标题，请说出insert菜单，它将被渲染并打开。现在，保持打开状态，进入控制台并重试：
var menuSet = $('.mce-menu');
// menuSet.length : 1
你将获得打开的菜单。
现在，如果你关闭它，点击打开的菜单中的任何地方，然后重试：
var menuSet = $('.mce-menu');
// menuSet.length : 1
...菜单未从DOM中删除。这是一个好消息：由于菜单被渲染一次，我们可以得到并操纵它。
我对每个.mce-menu元素都有一些DOM操作，但是现在我必须在第一次打开每个菜单时。
但如何处理此类事件？
我无法从官方文档或论坛或任何地方获得任何线索。
答案 0 :(得分：0)
这绝对是可能的，但我们都不了解JS事件的管理方式。
我尝试用旧方式编写事件处理程序：
$('body').on('click', function() {
do_stuff();
});
虽然我必须采用新的正确方法：
$('body').on('click', '.mce-btn', function() {
do_stuff();
});
通过这种方式，可以正确管理事件。
答案 1 :(得分：0)
尝试使用onPostrender功能：
editor.addMenuItem("mybtn", {
type: "menuitem",
name: 'mybtn',
onPostRender:function (){
// write your code here//
},
答案 2 :(得分：0)
我通过编写一个方便的`Tinymce 4插件来解决这个问题，该插件专注于此目的。
当然这个插件是由GNU GPL v2许可证开源的，遵循最初的Tinymce许可政策。
Tinymce Plugin MenusController：
https://github.com/sirap-group/tinymce-plugin-menuscontroller
但我还没有写过文档，我很抱歉。
但是，以下是如何使用它：
从github下载最新版本的tarball，或者更好的是从bower安装它：
bower install tinymce-plugin-menuscontroller
如果您不了解bower，请在此处发现：https://bower.io（npm i -g bower; bower --help）。
npm软件包尚不可用，我很快就会提供它（但欢迎github上的任何Pull Request ...）。
默认情况下，插件文件夹将被下载并放在./bower_components中。如果您以同样的方式安装了tinymce，那么您还可以./bower_components/tinymce或./bower_components/tinymce-dist。
您不需要将脚本添加到index.html文件中，因为如果您正确设置了该文件，则会自行加载该脚本。
所以你需要：
将它符号链接到tinymce插件文件夹：
$ cd ./bower_components/tinymce/plugins
$ ln -s ../../tinymce-plugin-menuscontroller menuscontroller
将其加载到tinymce init中。例如：
tinymce.init（{ 选择器：＆＃39; textarea＆＃39;， // [...] 插件：＆＃39; menuscontroller＆＃39; }）
var editor = window.tinymce.activeEditor
var menusCtl = editor.plugins.menuscontroller
// at this point, if menusCtl is undefined, something gone wrong in the setup step: please check the previous steps.
获取菜单栏：
menusCtl.getMenubar()
按照注册时的名称获取每个菜单：
menusCtl.getMenuByName(String: name)
获取工具栏
menusCtl.getToolbars
menusController:mceMenuRendered事件当呈现任何tinymce菜单时
$('body').on('menusController:mceMenuRendered', function (evt, menuDomNode) {
console.log(menuDomNode)
})
menusController:mceMenuRendered事件在活动编辑器菜单栏的每个菜单中被调用一次，当它被渲染时，所以当用户单击下拉菜单时（File链接为＆＃34;文件＆＃ 34;菜单，Insert用于＆＃34;插入＆＃34;菜单等...）。
menusController:mceMenuItemRendered:<menuDomID> 呈现任何菜单项时。我们说我们创建了一个带有my-custom-menu-item标识符的菜单项。所以tinymce将其DOM ID设置为my-custom-menu-item。因此，MenusController插件将创建并绑定到body以下事件：
menusController:mceMenuItemRendered:my-custom-menu-item
因此，您可以处理自定义菜单项的呈现事件：
$('body').on('menusController:mceMenuItemRendered:my-custom-menu-item',
function (evt, menuItemDomNode) {
console.log(menuItemDomNode)
}
)
写作时间（星期一，2017年3月13日），最后发布的版本是
v0.2.1。但v0.3.0计划很快发布，并将提供一个比上一个更有用的新事件。
menusController:mceMenuItemRendered 当您需要知道菜单项ID以处理事件
menusController:mceMenuItemRendered:<menuDomID>并将菜单项DOM Node作为回调参数时，事件menusController:mceMenuItemRendered不需要它但是将其作为回调参数提供每个新呈现的菜单项的回调参数：
$('body').on('menusController:mceMenuItemRendered',
function (evt, menuItemID) {
console.log(menuItemID) // 'my-custom-menu-item'
// So you can hanlde all menu item even if you don't know its ID
// And you can also handle the DOM Node with the selector by ID
var selector = '#' + menuItemID
var menuItem = $(selector)
console.log(menuItem) // jQuery object (the menu item)
}
)
答案 3 :(得分：-1)
使用tinymce，您可以通过编辑器对象完全自定义菜单按钮：
networkEmitter = new EventEmitter();
window.addEventListener('offline', onOffline);
onOffline(e) {
this.networkEmitter.emit('wentOffline');
}
不幸的是你不能在文本属性中插入html，但我认为你可以通过更多的研究来做到这一点。您还可以在菜单按钮上为click事件创建回调函数。
就个人而言，我将使用 tinymce 官方api来修改dom，而不是做一些其他事件驱动的dom操作。
您可以找到更多好例子here