Question

这很简单，我想检测一下在一个简单的编辑器textarea中点击一个图像。

如果没有为它创建插件，这真的无法实现吗？我不能使用这种方法，因为我正在为drupal的wysiwyg模块开发一个插件，我希望与所有wysiwyg支持的编辑兼容。

onclick图像属性不起作用， .click听众不会工作。 wysiwyg模块api没有任何文档。

有谁知道解决这个问题？我只想检测点击图像的时间，就是这样......

Answer 1

documentation是一个很好的起点。

您可以传递设置功能以在初始化时绑定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所述，setup init param是前往此的方式

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无关。正如您所写，您希望支持多种WYSIWYG编辑器。

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

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

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

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

4 个答案: