WordPress TinyMCE 添加自定义图标按钮

第一步:创建按钮初始化函数

将下列代码放置到主题函数模板functions.php闭合中:

//创建按钮初始函数  
add_action('init', 'custom_button');  
function custom_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' );     
    }     
}

第二步:注册按钮以及它的 TinyMCE 插件

    将下列代码放置到主题函数模板functions.php闭合中:

//注册按钮  
function register_button( $buttons ) {     
    array_push( $buttons, "|", "youku" );//添加一个优酷视频按钮     
    array_push( $buttons, "|", "sohu" );//添加一个搜狐视频按钮  
    return $buttons;     
}  
//注册TinyMCE按钮插件     
function add_plugin( $plugin_array ) {     
   $plugin_array['youku'] = get_bloginfo( 'template_url' ) . '/myeditor/youku.js';//优酷按钮的js路径  
   $plugin_array['sohu'] = get_bloginfo( 'template_url' ) . '/myeditor/sohu.js';//搜狐按钮的js路径  
   return $plugin_array;     
}

第三步:完成图标按钮 TinyMCE 插件 JS 部分

    在第二步中 add_plugin 函数中引入了 JS,根据路径创建好 js 文件,以 youku.js 为例说明。将下列代码保存为 youku.js, 上传到指定目录/myeditor/。

// Youku  
(function() {  
    tinymce.create('tinymce.plugins.youku', {//注意这里有个 youku  
        init : function(ed, url) {  
            ed.addButton('youku', {//注意这一行有一个 youku  
                title : 'Youku',//图标文字说明  
                image : url+'/youku.png',//注意图片的路径 url是当前js的路径  
                onclick : function() {  
                     ed.selection.setContent('{youku}' + ed.selection.getContent() + '{/youku}');  //{}改为[]}
                }  
            });  
        },  
        createControl : function(n, cm) {  
            return null;  
        },  
    });  
    tinymce.PluginManager.add('youku', tinymce.plugins.youku);//注意这里有两个 youku  
})();

    注:上述代码调用的图标 youku.png 也放置在主题 /myeditor/ 目录(新建)