Javascript 如何检测tinymce 4中何时呈现菜单？

在

tinymce 4

中，会呈现菜单栏，但每个菜单仅在单击时呈现

为了说明这一点，请注意菜单栏中的每个菜单都有

mce menu

类

任何时候，如果没有打开菜单，如果尝试获取菜单集，都会失败，因为它们尚未呈现：

var menuSet = $('.mce-menu');
// menuSet.length : 0

但是，如果单击菜单栏标题，比如说插入菜单，它将被呈现并打开。现在，保持打开状态，转到控制台并重试：

var menuSet = $('.mce-menu');
// menuSet.length : 1

var menuSet = $('.mce-menu');
// menuSet.length : 1

你会看到打开的菜单

现在，如果您将其关闭，请单击打开菜单中的任意位置，然后重试：

var menuSet = $('.mce-menu');
// menuSet.length : 1

var menuSet = $('.mce-menu');
// menuSet.length : 1

。。。菜单不会从DOM中删除。这是一个好消息：由于菜单只呈现了一次，我们可以获取并操作它

我对每个

.mce菜单

元素都有一些DOM操作，但是现在我必须在第一次打开每个菜单时进行操作

但是如何处理此类事件？

---

我无法从官方文档、论坛或任何地方获得任何线索。

使用tinymce，您可以通过编辑器对象完全自定义菜单按钮：

不幸的是，您不能在文本属性中插入html，但我认为您可以通过更多的研究来做到这一点。您还可以为菜单按钮上的click事件创建回调函数

就我个人而言，我将使用tinymce官方api修改dom，而不是执行其他事件驱动的dom操作

---

您可以找到一个更好的例子，这肯定是可能的，但我们都不知道如何管理JS事件

我尝试以旧的方式编写事件处理程序：

$('body').on('click', function() { 
    do_stuff();
});

虽然我必须用新的、正确的方法：

$('body').on('click', '.mce-btn', function() { 
    do_stuff();
});

---

这样，事件就可以得到正确管理。

尝试使用onPostrender功能：

editor.addMenuItem("mybtn", {
    type: "menuitem",
    name: 'mybtn',
    onPostRender:function (){
        // write your code here//
    },

---

我通过编写一个方便的“Tinymce 4插件”解决了这个问题，该插件的重点就是这个

当然，这个插件是由GNU GPL v2许可证开源的，遵循最初的Tinymce许可政策

Tinymce插件菜单控制器：

但是我还没有写文档，我很抱歉

但是，以下是如何使用它：

安装插件 从github下载最新版本的tarball，或者从bower安装它，效果更好：

bower install tinymce-plugin-menuscontroller

如果您不知道

bower

，请在此处查找：（

npm i-g bower；bower--help

）

npm包还不可用，我很快就会提供它（但是欢迎在github上提出任何拉取请求…）

默认情况下，插件文件夹将被下载并放置在

/bower\u components

中。如果您以相同的方式安装tinymce，您还可以使用

/bower\u components/tinymce

或

/bower\u components/tinymce dist

您不需要将脚本添加到

index.html

文件中，因为如果设置正确，tinymce会自动加载脚本

因此，您需要：

符号链接到tinymce插件文件夹：

$ cd ./bower_components/tinymce/plugins
$ ln -s ../../tinymce-plugin-menuscontroller menuscontroller

在tinymce init中加载它。例如：

tinymce.init({ 选择器：'textarea'， // [...] 插件：“菜单控制器” })

获取插件实例： 插件API（v0.2.1） 实例方法 获取菜单栏：

menusCtl.getMenubar()

按其注册的名称获取每个菜单：

menusCtl.getMenuByName(String: name)

获取工具栏

menusCtl.getToolbars

事件 事件：

menusController:mceMenuRendered

Event 渲染任何tinymce菜单时

$('body').on('menusController:mceMenuRendered', function (evt, menuDomNode) {
  console.log(menuDomNode)
})

menusController:mceMenuRendered

事件在呈现时为活动编辑器菜单栏的每个菜单调用一个事件，因此当用户单击下拉菜单时（“文件”菜单的

File

链接、“插入”菜单的

Insert

，等等）

事件：

menusController:mceMenuItemRendered:

呈现任何菜单项时。假设我们创建了一个带有

my custom menu item

标识符的菜单项。因此，tinymce将其DOM ID设置为“我的自定义菜单项”。因此，MenuController插件将创建并绑定到以下事件：

menusController:mceMenuItemRendered:my-custom-menu-item

因此，您可以处理自定义菜单项的渲染事件，并对其进行侦听：

$('body').on('menusController:mceMenuItemRendered:my-custom-menu-item',
  function (evt, menuItemDomNode) {
    console.log(menuItemDomNode)
  }
)

菜单控制器API（v0.3.0+） A在编写时（2017年12月13日，星期一），最新发布的版本是

v0.2.1

。但是

v0.3.0

计划很快发布，它将提供一个比上一次更有用的新事件

事件：

menusController:mceMenuItemRendered

当您需要知道菜单项ID以处理事件时，事件

菜单控制器：mceMenuItemRendered:

将菜单项DOM节点作为回调参数，事件

菜单控制器：mceMenuItemRendered

不需要它，而是将它作为每个新渲染菜单项的回调参数提供：

---

不要认为这些信息与OP试图做的事情相关：问题是初始化后如何操作菜单，因此在这一阶段暗示发生的事情没有帮助。在我看来，操纵javascript驱动的DOM监听未记录的事件从来都不是一个安全/好主意。尤其是在像tinyMce这样的复杂插件中。这种事情总是以不可预测的方式适得其反。因为OP没有解释所需的操作类型，我建议阅读官方api，看看是否有办法通过记录在案的api实现相同的api。我可以看到您来自何方，并且肯定同意适得其反的问题。尽管如此，我们中的一些人还是以一些奇怪的方式使用TinyMCE（在我的例子中，我试图让它管理XML/TEI标记），并且需要这种信息。嗯，这是由问的人考虑这是一个好主意或不尝试这种经验。顺便说一句，我将在下面发布一个解决方案。我有完全相同的问题：我想根据编辑器中当前发生的情况有条件地激活菜单项。我设法截获了文档主体上的click事件，但不幸的是，TinyMCE截获了其他事件，如

$('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)
  }
)