[英]Add event handler to element in tinyMCE
i am working on a plugin for tinymce that adds an HTML-Element to the editor content...我正在为 tinymce 开发一个插件,该插件将 HTML 元素添加到编辑器内容中......
This is how i insert the code:这就是我插入代码的方式:
let el = tinymce.activeEditor.dom.create('div', {'class': 'css-class'}, "this is the text");
tinymce.activeEditor.selection.setNode(el);
Now i want to open a dialog if the user clicks on the new HTML-element.现在,如果用户单击新的 HTML 元素,我想打开一个对话框。 I tried to add an event listener like this
我试图添加这样的事件监听器
el.addEventListener("click", function() {
console.log("clicked!");
});
but this does not do anything...但这并没有做任何事情......
I am working with tinyMCE 5.x我正在使用 tinyMCE 5.x
You should refer to https://www.tiny.cloud/docs/api/tinymce.dom/tinymce.dom.eventutils/#bind您应该参考https://www.tiny.cloud/docs/api/tinymce.dom/tinymce.dom.eventutils/#bind
From Your perspective, the code should look like this:从您的角度来看,代码应如下所示:
tinymce.activeEditor.dom.bind(el, 'click', (event) => {/* you function here */})
or或者
tinymce.activeEditor.dom.bind(el, 'click', function(event) {/* you function here */})
EDIT :编辑:
This is a working solution, though there should be a better way to do it这是一个可行的解决方案,尽管应该有更好的方法来做到这一点
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");
});
Please note that get()
function from dom
accepts element id without #请注意,来自
dom
的get()
function 接受不带 # 的元素 id
Here is a TinyMCE Fiddle that adds a click listener to content that exists in the editor:这是一个 TinyMCE Fiddle,它为编辑器中存在的内容添加了点击侦听器:
https://fiddle.tiny.cloud/g9haab 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. 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 . The Fiddle has some default content in the editor when it loads:
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>
...and then there is code in a setup function that looks for the <span>
with the id
of target
and attaches a click listener using standard JavaScript: ...然后在设置 function 中有代码,它使用
target
id
查找<span>
并使用标准 JavaScript 附加点击侦听器:
const theTarget = editor.contentDocument.getElementById('target');
theTarget.addEventListener("click", function () {
console.log('You CLICKED the text!');
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.