据我所知,目前市面上的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/14952052/convert-blob-url-to-normal-url