Jquery/javascript 检测 tinymce 内的点击事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6128791/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery/javascript detect click event inside tinymce
提问by tobbr
Simple as that, i want to detect when an image has been clicked inside a tinymce editor textarea.
就这么简单，我想检测何时在 tinymce 编辑器文本区域内单击了图像。
is this really not achievable without creating a plugin for it? i cant use this method because im developing a plugin for drupal's wysiwyg module and i want to to be compatibale with all editors that wysiwyg supports.
如果不为其创建插件，这真的无法实现吗？我不能使用这种方法，因为我正在为 drupal 的所见即所得模块开发一个插件，并且我希望与所见即所得支持的所有编辑器兼容。
onclick in the image attributes wont work, .click listeners wont work. the wysiwyg module api has no documentation whatsoever.
图像属性中的 onclick 不起作用，.click 侦听器不起作用。wysiwyg 模块 api 没有任何文档。
anybody knows any solution to this? i just want to detect when an image has been clicked, thats it...
有人知道有什么解决办法吗？我只想检测图像何时被点击，就是这样......
回答by DarthJDG
The documentationis a good place to start.
该文件是一个良好的开端。
You can pass a setup function to bind TinyMCE events on initialization. Have a look at a demo here: http://jsfiddle.net/xgPzS/5/
您可以通过设置函数在初始化时绑定 TinyMCE 事件。看看这里的演示：http: //jsfiddle.net/xgPzS/5/
HTML:
HTML：
<textarea style="width:400px; height:400px;">
some text
<img src="http://www.hidekik.com/en/filelist/files/sample.jpg" />
</textarea>
Javascript:
Javascript：
$('textarea').tinymce({
setup: function(ed) {
ed.onClick.add(function(ed, e) {
alert('Editor was clicked: ' + e.target.nodeName);
});
}
});
回答by Sorin Haidau
In Tinymce 4.x jQuery version, I only managed to get the focus and blur events by using the following method in the setup
在 Tinymce 4.x jQuery 版本中，我只能通过在设置中使用以下方法来获取焦点和模糊事件
JavaScript:
JavaScript：
setup : function(ed) {
ed.on('init', function() {
$(ed.getDoc()).contents().find('body').focus(function(){
alert('focus');
});
$(ed.getDoc()).contents().find('body').blur(function(){
alert('blur');
});
});
}
回答by Thariama
As mentioned by DarthJDG the setup init paramis the way to go here
正如 DarthJDG 所提到的，setup init 参数是通往这里的方法
tinyMCE.init({
...
setup: function(ed) {
ed.onClick.add(function(ed, e) {
if (e.target.nodeName.toLowerCase() == 'img') {
alert('Img-Tag has been clicked!');
}
});
},
....
});
回答by Yoni
I think the correct approach here has nothing to do with tinyMCE. As you wrote, you want to support multiple kinds of WYSIWYG editors.
我认为这里的正确方法与 tinyMCE 无关。正如您所写，您希望支持多种 WYSIWYG 编辑器。
My suggestion is that you simply use jQuery delegate events. You bind the event handler on your own dom element, somewhere "up stream" on the document. It will grab all the click events on the images that are nested below it, and then act accordingly.
我的建议是您只需使用 jQuery 委托事件。您将事件处理程序绑定到您自己的 dom 元素上，位于文档的“上游”某处。它将抓取嵌套在其下方的图像上的所有点击事件，然后采取相应的行动。
See here: http://api.jquery.com/on/
见这里：http: //api.jquery.com/on/
I have used this method successfully several times to bind click events on elements that didn't yet exist (they are inserted to the dom dynamically by the user).
我已经多次成功地使用此方法将单击事件绑定到尚不存在的元素上（它们由用户动态插入到 dom）。
