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

Question

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

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

我尝试通过双击“Hello”一词来启动一个功能。

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

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

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

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

Answer 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 .

Note that editor.$ is not a jQuery object, so you cannot do everything you are used to with jQuery, however it's pretty close.