在 tinyMCE 编辑器中将 JavaScript ondblclick 事件设置为 class

Question

我的 tinyMCE textarea 编辑器中的一些单词位于一个带有特定 class 的跨度标记中，该标记称为 "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 编辑器？

Answer 1

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

为此，您可以使用 setup 回调和 TinyMCE 为您提供的 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.

在 tinyMCE 编辑器中将 JavaScript ondblclick 事件设置为 class

Set a JavaScript ondblclick event to a class inside tinyMCE editor

javascript

jquery

tinymce