Jquery/javascript 检测 tinymce 内的点击事件

Question

就这么简单，我想检测何时在 tinymce 编辑器文本区域中单击了图像。

如果不为其创建插件，这真的无法实现吗？ 我不能使用这种方法，因为我正在为 drupal 的所见即所得模块开发一个插件，并且我想与所见即所得支持的所有编辑器兼容。

图像属性中的 onclick 不起作用，.click 侦听器不起作用。 所见即所得的模块 api 没有任何文档。

有人知道对此有任何解决方案吗？ 我只想检测何时单击了图像，就是这样...

Answer 1

文档是一个很好的起点。

您可以通过设置 function 在初始化时绑定 TinyMCE 事件。 看看这里的演示： http://jsfiddle.net/xgPzS/5/

HTML：

<textarea style="width:400px; height:400px;">
    some text
    <img src="http://www.hidekik.com/en/filelist/files/sample.jpg" />
</textarea>

Javascript：

$('textarea').tinymce({
    setup: function(ed) {
        ed.onClick.add(function(ed, e) {
            alert('Editor was clicked: ' + e.target.nodeName);
        });
    }
});

Answer 2

在 Tinymce 4.x jQuery 版本中，我只能通过在设置中使用以下方法获得焦点和模糊事件

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');
        });  
    });
}

Answer 3

正如 DarthJDG 所提到的，设置初始化参数是 go 的方式

tinyMCE.init({

    ...

    setup: function(ed) {
        ed.onClick.add(function(ed, e) {
            if (e.target.nodeName.toLowerCase() == 'img') {
                alert('Img-Tag has been clicked!');
            }
        });
    },

    ....

});

Answer 4

我认为这里的正确做法与 tinyMCE 无关。 正如您所写，您希望支持多种所见即所得的编辑器。

我的建议是您只需使用 jQuery 委托事件。 您将事件处理程序绑定在您自己的 dom 元素上，在文档的“上游”某处。 它将抓取嵌套在其下方的图像上的所有点击事件，然后采取相应的行动。

见这里： http://api.jquery.com/on/

我已经多次成功地使用此方法将点击事件绑定到尚不存在的元素上（它们由用户动态插入到 dom 中）。