让你的WordPress编辑器支持粘贴截图

据我所知，目前市面上的web富文本编辑器默认设置都很少支持粘贴截图（比如常用的qq截图），百度的ueditor、大名鼎鼎的tinymce在WordPress中都不支持，造成我们的图片编辑效率大大下降，不过一个个人项目wangEditor却是支持的。我们先略过这些原因，看看具体的实现方式。

paste事件

web常用的事件我们都比较熟悉常用，但是paste事件可能有点陌生。看看这个事件在各个浏览器的支持情况：

我们可以看到这些依然是淡绿的一片，大部分浏览器都是部分支持。各种富文本编辑器不支持也是情有可原了。

具体实现

php代码：

add_action( 'admin_init', 'image_paster' );
function image_paster() {
    add_filter( 'mce_buttons', 'my_register_tinymce_button' );
    add_filter( 'mce_external_plugins', 'mce_plugins' );
}

function my_register_tinymce_button( $buttons ) {
    array_push( $buttons, "button_eek", "button_green" );
    return $buttons;
}

function mce_plugins( $plugins ) {
    $plugins['imagepaster'] = plugins_url( '', __FILE__ ) . '/js/image-paster.js';
    return $plugins;
}

JS代码：

(function( $ ) {
    tinymce.create('tinymce.plugins.MyButtons', {
        init : function(ed, url) {
            ed.on( 'paste', function( event ){
                var items = (event.clipboardData || event.originalEvent.clipboardData).items;
                for (index in items) {
                    var item = items[index];
                    if (item.kind === 'file') {
                        var blob = item.getAsFile();
                        var reader = new FileReader();
                        reader.onload = function(event){
                            var return_text = '';
                            return_text = '<img src="' + event.target.result + '">';
                            ed.execCommand('mceInsertContent', 0, return_text);
                        };
                        reader.readAsDataURL(blob);
                    }
                }
            } );
        },
        createControl : function(n, cm) {
            return null;
        },
    });
    tinymce.PluginManager.add( 'imagepaster', tinymce.plugins.MyButtons );
})( jQuery );

这其实就是一个WordPress小插件，如图，你就可以下载使用了。

参考链接

Guide to Creating Your Own WordPress Editor Buttons

https://codex.wordpress.org/Plugin_API/Filter_Reference/mce_external_plugins

http://stackoverflow.com/questions/6333814/how-does-the-paste-image-from-clipboard-functionality-work-in-gmail-and-google-c

http://stackoverflow.com/questions/14952052/convert-blob-url-to-normal-url