jquery/javascript检测tinymce内的点击事件答案

【问题标题】：Jquery/javascript detect click event inside tinymcejquery/javascript检测tinymce内的点击事件
【发布时间】：2011-05-25 18:02:26
【问题描述】：

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

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

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

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

【问题讨论】：

标签： javascript jquery drupal tinymce wysiwyg

【解决方案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);
        });
    }
});

【讨论】：

我得到 $("textarea").tinymce 不是一个函数。 tinymce 的所有荣耀都是 lovley，但就像我说的，我宁愿不使用依赖于编辑器的函数来实现这一点。但是看起来我必须为 tinymce 重写插件，因为这似乎是不可能的
显然您没有使用 TinyMCE jQuery 插件。那你为什么要标记 jQuery 呢？不管怎样，你可以在任何你调用tinymce.init() 的地方传递上面的设置属性。我认为您应该使用与编辑器相关的功能，而不是一些丑陋的 hack，您只能希望它在不同编辑器的未来版本中继续工作。只需编写您想做的通用代码，然后以正确的方式将其插入您想要支持的每个编辑器中。
$('textarea') 在这里不起作用，因为编辑器由 tinymce 创建的可编辑 iframe 组成，以前的 textarea 会被隐藏，点击时不会反应！！！
@Thariama：是的，这只是创建编辑器的示例选择器。它需要放在初始化编辑器的任何地方。当他标记 jQuery 时，我假设他使用的是 TinyMCE jQuery 插件，它采用完全相同的参数和属性，并且与 tinyMCE.init() 基本完全相同。
我标记了 jQuery，因为 Drupal 使用它，并且我假设 jQuery 插件将由所见即所得模块加载。 tinymce 是和对象，我可以从控制台访问它，但不能在代码中访问它，因为它说它不是函数。这可能是因为 .init() 已被调用。我试图弄清楚如何使用 Drupal.wysiwygInit() 函数足够早地调用 tinymce.init() 但到目前为止还没有运气。

【解决方案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');
        });  
    });
}

【讨论】：

【解决方案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!');
            }
        });
    },

    ....

});

【讨论】：

这与我的解决方案并没有什么不同。 ;)
是的。这部分属于 tinymce init 函数，并且 $('textarea') 在您的情况下不起作用

【解决方案4】：

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

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

请看这里：http://api.jquery.com/on/

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

【讨论】：