将事件处理程序添加到 tinyMCE 中的元素

Question

我正在为 tinymce 开发一个插件，该插件将 HTML 元素添加到编辑器内容中......

这就是我插入代码的方式：

let el = tinymce.activeEditor.dom.create('div', {'class': 'css-class'}, "this is the text");
tinymce.activeEditor.selection.setNode(el);

现在，如果用户单击新的 HTML 元素，我想打开一个对话框。 我试图添加这样的事件监听器

el.addEventListener("click", function() {
console.log("clicked!");
});

但这并没有做任何事情......

我正在使用 tinyMCE 5.x

Answer 1

您应该参考https://www.tiny.cloud/docs/api/tinymce.dom/tinymce.dom.eventutils/#bind

从您的角度来看，代码应如下所示：

tinymce.activeEditor.dom.bind(el, 'click', (event) => {/* you function here */})

或者

tinymce.activeEditor.dom.bind(el, 'click', function(event) {/* you function here */})

编辑：
这是一个可行的解决方案，尽管应该有更好的方法来做到这一点

let el = tinymce.activeEditor.dom.create('div', {'class': 'css-class', 'id': "mydiv"}, "this is the text");
tinymce.activeEditor.selection.setNode(el);
tinymce.activeEditor.dom.get("mydiv").addEventListener("click", function() {
    console.log("clicked");
});

请注意，来自dom的get() function 接受不带 # 的元素 id

Answer 2

这是一个 TinyMCE Fiddle，它为编辑器中存在的内容添加了点击侦听器：

https://fiddle.tiny.cloud/g9haab

I would note that you don't need to use any TinyMCE specific APIs to add a click listener - once you have content in TinyMCE it is effectively an HTML document in an iframe and you can interact with it just as you can any other HTML document . Fiddle 在加载时在编辑器中有一些默认内容：

<p>
  This is a paragraph of text that 
  <span style="color: red; font-weight: bold;" id="target">
    contains a span
  </span>
   to add a click listener
</p>

...然后在设置 function 中有代码，它使用target id查找<span>并使用标准 JavaScript 附加点击侦听器：

const theTarget = editor.contentDocument.getElementById('target');
theTarget.addEventListener("click", function () {
  console.log('You CLICKED the text!');
});