最近在对我们的wordpress中文社区进行改版的时候，前台用户编辑器的地方我觉得在编辑器上面显示个添加媒体的按钮整体可丑，所以就想着把这个按钮不显示，然后直接在编辑器的工具条上显示一个上传图片的按钮（原来TinyMCE编辑器默认隐藏的有一个上传图片的按钮，但是现在好像不能用了），点击按钮调用wordpress自带的媒体库窗口添加图片，于是就研究了一下，最终效果如下图，是不是整体上看着高大上了很多，哈哈。
下面就给大家分享一下，如何实现向wordpress经典编辑器中工具条中添加上传图片按钮。
1、在functions.PHP中引入wordpress自带媒体库窗口的js文件以及所需的所有脚本、样式、设置和模板（这个只有在前台使用该功能的时候需要，如果只在后台使用这一步可以省略）
/***wordpress经典编辑器工具条增加上传图片按钮——引入插入媒体库弹出窗口所需js文件以及所需的所有脚本、样式、设置和模板
*wordpress日记 https://www.wp-diary.com
**/
function enqueue_scripts_styles_admin(){
wp_enqueue_media();
}
add_action('wp_enqueue_scripts','enqueue_scripts_styles_admin');
2、在编辑器上注册新按钮
/***在编辑器上注册新按钮
*wordpress日记 https://www.wp-diary.com
**/
function my_register_mce_button( $buttons ) {
array_push( $buttons,'my_mce_button' );//my_mce_button就是你新注册的按钮id
return $buttons;
/**
*声明新按钮的脚本
*wordpress日记 https://www.wp-diary.com
**/
function my_add_tinymce_plugin( $plugin_array ) {
$plugin_array['my_mce_button'] = get_template_directory_uri() .'/js/editor_add_image_upload.js';//editor_add_image_upload.js这个是js的文件名，可以自定义
return $plugin_array;
}
4、制作新按钮所需的js文件
/****/
jQuery(function($) {
tinymce.PluginManager.add('my_mce_button',function( editor,url ) {//my_mec_button一定要和你创建的按钮id一致
editor.addButton('my_mce_button',{
text: false,//因为我使用了icon图标来显示按钮，所以按钮的文字设置成false，你也可以直接写“上传图片”这样的文字
icon: 'image',//图片可以参考tinymce（Version: 5.0.4）内含icon对照表，https://blog.csdn.net/qq_34114082/article/details/90024080
onclick: function() {
if (this.window === undefined) {
this.window = wp.media({
title: '插入媒体',
library: {type: 'image'},
button: {text: '插入'}
});
var self = this; // Needed to retrieve our variable in the anonymous function below
this.window.on('select',function() {
var selection = self.window.state().get('selection').toArray();
var insert_html='';
if(selection.length){
for (k = 0; k < selection.length; k++) {
var media_url = selection[k].toJSON().url;
insert_html+='<p><img src="'+media_url+'" /></p>';//每张图片的代码结构
}
}
wp.media.editor.insert(insert_html);//把所有图片插入到编辑器
});
}
this.window.open();
return false;
}
});
});
});
5、检查权限，并挂在到init的钩子上(如果只在后台使用，使用admin_head钩子就行了)
/***挂载函数到正确的钩子
*wordpress日记 https://www.wp-diary.com
**/
function my_add_mce_button() {
if ( !current_user_can( 'edit_posts' ) && !current_user_can( 'edit_pages' ) ) {
return;
}
// 检查是否启用可视化编辑
if ( 'true' == get_user_option( 'rich_editing' ) ) {
add_filter( 'mce_external_plugins','my_add_tinymce_plugin' );
add_filter( 'mce_buttons','my_register_mce_button' );
}
}
add_action('init','my_add_mce_button');以上就是整个实现的思路和方法，希望对有需要的朋友能有所帮助。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
