WordPress后台编辑器添加按钮-岸边IBIAN

测试环境：WordPress 5.9.2

增强wordpress编辑器是必要的，因为有的只是一些基础的按钮，比如我想要使用pre标签的按钮就没有

在主题functions.php增加如下代码，建议子主题

function tt_add_quicktags() {
?>

<script type="text/javascript">
    QTags.addButton( 'pre', 'pre', '<pre>\n','\n</pre>' );
    </script>
<?php
}
add_action('admin_print_footer_scripts', 'tt_add_quicktags' );

上面的代码仅仅是添加了quicktags的快捷按钮，也就是后台编辑器切换到文本时候的按钮，在可视化里面并没有，这写文章不太爽还得来回切换。下面代码吧按钮加在可视化里面

//初始化时执行add_editor_button函数
add_action('init', 'add_editor_button');
function add_editor_button() {
    //判断用户是否有编辑文章和页面的权限
    if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') ) {
        return;
    }
    //判断用户是否使用可视化编辑器
    if ( get_user_option('rich_editing') == 'true' ) {

        add_filter( 'mce_external_plugins', 'add_plugin' );
        add_filter( 'mce_buttons', 'register_button' );
    }
}

/**
 * register_button 添加按钮
 * @param  array $buttons 按钮数组
 * @return array 按钮数组
 */
function register_button( $buttons ) {
    array_push( $buttons, "pre" ); //添加 一个pre按钮
    return $buttons;
}

/**
 * @param array $plugin_array 按钮所在的js
 */
function add_plugin( $plugin_array ) {
   $plugin_array['mybutton_script'] = get_bloginfo( 'template_url' ) . '/js/editor_button.js'; //pre按钮的js路径
   return $plugin_array;
}

pre按钮的js路径建议引用子主题的路径

增加js文件

 (function() {
    tinymce.create('tinymce.plugins.mybutton', { //mybutton是插件名称
        init : function(ed, url) {
            ed.addButton('pre', { //pre是按钮名称
                title : 'pre标签',
                image : url + '/pre.png',//注意图片的路径 url是当前js的路径
                onclick : function() {
                     var selected_text = ed.selection.getContent();
                     ed.selection.setContent('<pre>'+selected_text+'</pre>'); //插入编辑器的内容

                }
            });
        },
        createControl : function(n, cm) {
            return null;
        },
    });
    tinymce.PluginManager.add('mybutton_script', tinymce.plugins.mybutton); //第一个是脚本，第二个是插件
})();

另外pre.png你需要自己去找啦，也是放在js的文件夹下面

THE END