向 tinymce 编辑器中的元素添加悬停事件答案

【问题标题】：Adding hover event to elements inside a tinymce editor向 tinymce 编辑器中的元素添加悬停事件
【发布时间】：2011-10-25 19:58:20
【问题描述】：

我有一个 tinymce 插件，可以用内容填充编辑器。

某些填充元素具有 class="hoverable"

我想将函数附加到具有 class="hoverable" 的元素上的悬停事件

我知道如何在创建函数中使用 ed.onClick.add 附加 onClick，但没有 ed.onHover.add 或 ed.onMouseIn.add。

编辑：当你按下菜单中的插件按钮时，我的插件实际上会弹出一个对话框。用户从对话框中选择一些内容并将其插入到编辑器中。

【问题讨论】：

标签： javascript jquery tinymce

【解决方案1】：

您可以在编辑器中使用类“hoverable”为元素添加鼠标悬停处理程序。

$(ed.getBody()).find('.hoverable').hover(function (evt){ /* do tooltip here */   });

您可以找到使用jQuery here 创建简单工具提示的方法。

【讨论】：

我很确定如果在插件上调用 create 函数时内容已经在编辑器中，这将起作用。我并没有真正在问题中说清楚，但在我的情况下，直到用户从通过按下菜单中插件的按钮启动的弹出窗口中选择它之后才放入内容。我最终做了一些与此非常相似的事情（如果你关心，你可以看到我的答案）。

【解决方案2】：

在将所选内容添加到我添加的编辑器的功能中

tinymce.activeEditor.$('.hoverable').live('mouseover mouseout', function(evt) {
    if (evt.type == 'mouseover') {
        //do hover stuff
    }
    else {
        //undo hover stuff
    }
}

在我的情况下，可能会添加新的可悬停的东西，所以我需要 .live 在其他情况下你可以只使用 .hover。

【讨论】：