wordpress后台编辑器添加按钮

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

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;
}

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的文件夹下面

 

赞赏

微信赞赏支付宝赞赏