为WordPress默认编辑器添加自定义按钮

最后更新于 2013 年 3 月 9 日

WordPress的默认编辑器是TinyMCE，TinyMce本身是款很强大的编辑器，只是WP中并没有开启它的全部功能。这不是坏事，并不是所有功能都是你需要的，你需要的可能也不在其中。学会如何开启高级功能，如何添加自定义按钮就够了。

开启高级功能很简单，装一些现成的插件，例如TinyMCE Advanced，本文主要介绍如何添加一些自定义按钮。

如何突出显示内容

在编辑文章时，有时候想让一部分内容突出显示，例如这部分是代码，或者这部分是引用，或者只是单纯的想搞个与众不同的样式。

用HTML，我们通常是这么实现的

<div class="div_style1">需要突出的内容 需要突出的内容 需要突出的内容</div>
<div class="div_style1">需要突出的内容 需要突出的内容 需要突出的内容</div>
<div class="div_style1">需要突出的内容 需要突出的内容 需要突出的内容</div>

在主题的style.css中为定义div_style1这个样式，例如这样

.div_style1 {
	background:#FFFFCC;
	border:1px solid #CCCCCC;
	color:#666666;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size:14px;
	padding:5px 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

产生的样式如下图所示

你可以手动在编辑器中输入这段div结构，很不方便对不对。那么就把这段div代码定义为一个shortcode，当在编辑器输入

[mydiv]…[/mydiv]

被mydiv标签包围的部分就会被自动替换成<div class="div_style1">…</div>，如下图所示

如何为TinyMCE添加自定义按钮

现在，我们要把“插入shortcode [mydiv]…[/mydiv]”的功能做成一个TinyMCE按钮，用鼠标选择要突出的内容，点击这个按钮，就能使内容自动被[mydiv]标签包围。步骤如下：

Step 1. 通过钩子函数添加我们的自定义功能

打开主题的functions.php文件，添加如下代码

//Hook into WordPress
add_action('admin_init', 'mydiv_button');

将自定义函数mydiv_button勾到admin_init这个钩子上，当用户访问管理员界面时，我们的自定义函数就会执行。

admin_init is triggered before any other hook when a user access the admin area

Step 2. 编写初始化函数mydiv_button

function mydiv_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' );
   }
}

这段函数的大体意思如下：

• 检测用户是否有编辑posts或者page的权限，如果没有，停止执行，返回
• 将我们的自定义函数挂载到两个钩子函数上（mce_external_plugins和mce_buttons），这两个钩子是WordPress为TinyMCE初始化增加的，第一个钩子在TinyMCE加载插件时执行，第二个在编辑器按钮被加载之前执行。

If “get_user_option(‘rich_editing’)” 为 true, 这个条件使得按钮只在所见即所得模式下显示。

Step 3. 注册按钮 Register Button

function register_button( $buttons ) {
	array_push( $buttons, "|", "mydiv" );
	return $buttons;
}

向按钮数组中添加新的按钮，可以用“|”将按钮划分到一个新组中

Step 4. 注册TinyMCE Plugin

function add_plugin( $plugin_array ) {
   $plugin_array['mydiv'] = get_bloginfo( 'template_url' ) . '/myeditor/mybuttons.js';
   return $plugin_array;
}

将按钮插件的代码映射到主题目录/myeditor/mybuttons.js文件中，该文件的代码如下所示

(function() {
    tinymce.create('tinymce.plugins.mydiv', {
        init : function(ed, url) {
            ed.addButton('mydiv', {
                title : 'My Div',
                image : url+'/mydiv.png',
                onclick : function() {
                     ed.selection.setContent('[mydiv]' + ed.selection.getContent() + '[/mydiv]');

                }
            });
        },
        createControl : function(n, cm) {
            return null;
        },
    });
    tinymce.PluginManager.add('mydiv', tinymce.plugins.mydiv);
})();

• 代码首先调用create函数创建一个新的TinyMCE Plugin，调用插件的名字和初始化函数
• 在init函数中，ed指向编辑器的实例，url指向插件的地址，这里指向的是mybotton.js文件的地址
• 通过onclick事件绑定按钮的响应时间，并通过setContent和getContent方法创建我们需要的格式
• 最后，将我们的自定义插件添加到TinyMCE的Plugin Manager中，注意使用的名字，如果名字错误将导致按钮无法加载

image参数指定按钮的图片，该图片要放在与mybuttons.js相同的目录下，这里就是在myeditor文件夹下

Step 5.定义shortcode

//the shortcode
add_shortcode("mydiv","my_div");
function my_div( $atts, $content=null ) {
	return '<div class="div_style1">'.$content.'</div>';
}

这段代码只是简单的返回我们需要的结构，你可以做更复杂的处理。

Step 6.定义CSS Class

将文章开头的css代码拷贝到主题的style.css文件中，就大功告成了。在文章中编写内容，然后点击按钮，就可以加入shortcode，产生突出显示的效果。

选择按钮图标

很多网站提供png图标下载，例如

http://www.iconarchive.com

选择一款自己喜欢的图标，添加到TinyMCE中吧。