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

时间:2018-03-12 22:51:01

标签: javascript wordpress tinymce

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

我遇到的问题是TinyMCE剥离了我添加到图像超链接的onClick事件,所以它不起作用。我知道解决这个问题的一种方法是更改​​TinyMCE的valid_elements部分,但是这将涉及安装插件的任何人必须手动进行这些更改。无论如何,只有在我的插件中读者点击图像时才能运行一些JS?

1 个答案:

答案 0 :(得分: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()" />' );
    }
});