用于可点击图像的 TinyMCE WordPress 插件

【问题标题】：TinyMCE WordPress Plugin for clickable image用于可点击图像的 TinyMCE WordPress 插件
【发布时间】：2018-08-21 02:04:50
【问题描述】：

我正在尝试为 TinyMCE 编辑器创建一个简单的 WordPress 插件，该插件向编辑器栏添加一个按钮，当您单击它时，它会在内容中插入一个图像，我希望这个图像可以被发生这种情况时阅读已发布并运行一些 JavaScript 的人（基本上只是为了打开一个具有特定大小的新窗口）。

我遇到的问题是 TinyMCE 删除了我添加到图像超链接的 onClick 事件，因此它不起作用。我知道解决此问题的一种方法是更改 TinyMCE 的 valid_elements 部分，但这将涉及安装插件的任何人都必须手动进行这些更改。当阅读器仅在我的插件中单击图像时，无论如何可以运行一些 JS 吗？

【问题讨论】：

“TinyMCE 剥离 onClick 事件”是什么意思？

标签： javascript wordpress tinymce

【解决方案1】：

应该是在您自己的插件中扩展 TinyMCE 有效元素的问题。这是一个添加启用所有属性的图像标签的示例：

add_filter( 'tiny_mce_before_init', function ( $init ) {
    $img = 'img[*]';
    if ( isset( $init['extended_valid_elements'] ) ) {
        $init['extended_valid_elements'] .= ',' . $img;
    } else {
        $init['extended_valid_elements'] = $img;
    }
    return $init;
});

我在创建 TinyMCE 按钮时使用以下内容将可点击的<img> 元素插入到帖子内容中：

ed.addButton( 'test_button', {
    title : 'Insert clickable image',
    image : '../wp-includes/images/smilies/icon_eek.gif',
    onclick : function() {
        ed.selection.setContent( '<img src="http://example.com/test.gif" onclick="alert()" />' );
    }
});

【讨论】：