学习的目的
不是知识而是行动

WordPress4.5默认TinyMCE编辑器增加自定义按钮

有些时候我们在编辑文章时,需要为一段文字或者代码添加一段独立的CSS样式或者是想插入一段代码及文字,例如:代码高亮默认是<pre></pre>,如果想变成<pre class=”prettyprint linenums”></pre>就需要在HTML模式单独添加CSS样式,如果在可视化模式下自定义一个按钮,直接插入这样的样式,岂不是很方便,当然,我们自定义的按钮还可以实现很多的功能,等待你去定义它吧!

自定义按钮

看见上面的效果了吧,现在我们来将自定义按钮添加到你的TinyMCE编辑器中。

第一步:在主题functions.php文件添加以下代码:

//添加自定义按钮到TinyMCE编辑器
add_action( 'admin_init', 'my_tinymce_button' );
function my_tinymce_button() {
//判断用户是否有编辑文章和页面的权限
     if ( current_user_can( 'edit_posts' ) && current_user_can( 'edit_pages' ) ) {
          add_filter( 'mce_buttons', 'my_register_tinymce_button' );
          add_filter( 'mce_external_plugins', 'my_add_tinymce_button' );
     }
}
function my_register_tinymce_button( $buttons ) {
     array_push( $buttons, "button1","button2");//添加自定义按钮,
     return $buttons;
}
function my_add_tinymce_button( $plugin_array ) {
        $plugin_array['my_button_script'] = get_bloginfo('template_directory') . "/js/editor.js";//自定义按钮JS路径
     return $plugin_array;
}

第二步:创建editor.js文件并上传到你主题目录中,本文中默认路径是主题目录/js/editor.js

(function() {
     /* 注册你的按钮*/
     tinymce.create('tinymce.plugins.MyButtons', {
          init : function(ed, url) {
             /**
              * 添加按钮button1
              */
               ed.addButton( 'button1', {
                    text : 'button1',
                    title : 'button1',
                    cmd: 'easy_button1_cmd'
               });
               ed.addCommand( 'easy_button1_cmd', function() {
                    var selected_text = ed.selection.getContent();
                    var return_text = '';
                    return_text = '<pre class="prettyprint linenums">' + selected_text + '</pre>';
                    ed.execCommand('mceInsertContent', 0, return_text);
               });
             /**
              * 添加按钮button2
              */
               ed.addButton( 'button2', { 
                 text : 'button2',
                 title : 'button2', 
                 onclick : function() {
                 ed.selection.setContent('[myshortcode]'); } }); 
             },
          createControl : function(n, cm) {
               return null;
            },
            });
     /* Start the buttons */
     tinymce.PluginManager.add( 'my_button_script', tinymce.plugins.MyButtons );
})();
做完上面的步骤,你的wordpress默认编辑器TinyMCE就会出现两个自义定按钮了button1和button2,根据自己的需要去进一步修改吧