将 JavaScript ondblclick 事件设置为 tinyMCE 编辑器中的类

【问题标题】：Set a JavaScript ondblclick event to a class inside tinyMCE editor将 JavaScript ondblclick 事件设置为 tinyMCE 编辑器中的类
【发布时间】：2016-07-25 16:11:58
【问题描述】：

我的 tinyMCE textarea 编辑器中的一些单词位于一个 span 标签中，其中包含一个名为“myclass”的特定类。例如，在 tinyMCE 文本区域编辑器中可见的词 Hello 在源代码中具有以下 HTML 代码：

<span class="myclass" id="hello">Hello</span>

我尝试在双击Hello这个词时启动一个功能。

通常的 jQuery 代码不适用于 tinyMCE 编辑器中的单词：

$(document).ready(function() {
    $('.myclass').dblclick(function() {
        alert('class found');
    });
});

当我双击编辑器中的单词 Hello 时，该功能不会触发。

如何将函数绑定到 tinyMCE 编辑器？

【问题讨论】：

标签： javascript jquery tinymce

【解决方案1】：

TinyMCE 使用 iframe 元素，因此您不能在“主”范围内使用 $('.myclass') 来获取该 iframe 内的元素（iframe 的内容是不同的范围）。
相反 - 您需要在该 iframe 的范围内运行 $('.myclass').dblclick。

为此，您可以使用 TinyMCE 为您提供的 setup 回调和 editor.on("init" 事件：

tinymce.init({
    selector:'textarea',
    setup: function(editor) {
          editor.on("init", function(){
              editor.$('p').on('dblclick', function() {
                  alert('double clicked');
              });
          });
    }
});

现场演示here。

请注意，editor.$ 不是 jQuery 对象，因此您无法使用 jQuery 完成所有习惯，但它非常接近。

【讨论】：