编写WordPress（以下简称wp）插件难免要和关联着wp的某一个或多个方面的东西，就拿我的刚更新的WS Auido Player插件来说，它需要提供一个窗口使得用户输入某些值来达到简化用户记忆以及操作的功能。自己敲一个两个代码还好，如果全部都是自己写的话，那和写HTML有什么区别呢？这个就是TinyMCE编辑器面世的主要目的之一。

其实想这个部分的东西，主要是因为国内也没出几个这样的插件（或者是我不知道而已）再者是也蛮少有人来写这方面的教程，网上找到的只有干巴巴、苦涩的英文句子，看着就是没中国字舒服，呵呵(^___^)，所以我就花了点时间自己整理出了这个教程。当然wp官方也有提到如何编写只不过写了一些核心的几句代码（看这里），剩下的还让你自己参考wp系统中tinymce插件。为什么要看wp系统中tinymce插件，而不是看tinymce官方的文档呢，这里要说句牢骚的话。wp其中使用到了很多及其优秀的开源代码，而且每个东西还或多或少的修改修改。这一下让我们看开源代码不是，看wp系统又感到迷茫。最好的是两者都得看。

书归正传，首先我们先简述下Tinymce在wp中用到版本。在wp 2.1.x – 2.3.x版本中使用到的是一直没有更改Tinymce 2。而在Tinymce 3推出不久，wp做了重大的版本变动，也就是现在的2.5，其中更新至tinymce3。而tinymce3也是一个大变动的版本，其中较大的改写了tinymce插件的函数。当然这也是为了方便用户而改进的。注意由于wp2.3.x版本已经老了，本教程只支持wp2.5以上版本。

首先，构建wp插件必要的文件以及基本代码，这里我把插件项目的名称叫做“SimplePlugins”以便记忆。首先我们先看下主文件的全部代码：

/*
Plugin Name: Simple Plugins
Plugin URI: http://www.icyleaf.cn/
Description: Simple Plugins
Version: 1.0
Author: icyleaf
Author URI: http://www.icyleaf.cn/
*/

// 定义一个常量并判断wp是否是2.5以上版本
define('IS_WP25', version_compare($wp_version, '2.4', '>=’) );

// 定义插件目录的常量
$myabspath = str_replace(“\\”,”/”,ABSPATH); // 针对Windows & XAMPP
define(‘WINABSPATH’, $myabspath);
define(‘WSAPFOLDER’, dirname(plugin_basename(__FILE__)));
define(‘WSAP_ABSPATH’, $myabspath.’wp-content/plugins/’ . WSAPFOLDER .’/');
define(‘WSAP_URLPATH’, get_option(‘siteurl’).’/wp-content/plugins/’ . WSAPFOLDER.’/');

if (IS_WP25){
function SinmplePlugins_addbuttons() {
// 权限判断，若没有撰写日志和页面的权限就返回。
if ( !current_user_can(‘edit_posts’) && !current_user_can(‘edit_pages’) ) return;

// 仅在Visual（可视化）模式下添加
if ( get_user_option(‘rich_editing’) == ‘true’) {
// 添加必要的函数到wp hook里面
add_filter(“mce_external_plugins”, “add_SinmplePlugins_tinymce_plugin”, 5);
add_filter(‘mce_buttons’, ‘register_SinmplePlugins_button’, 5);
}
}

// 在wp2.5的tinymce编辑器注册按钮插件，名字要独一无二
function register_SinmplePlugins_button($buttons) {
array_push($buttons, “separator”, “PluginsName”);
return $buttons;
}

// 加载自定义的TinyMCE插件：editor_plugin.js (wp2.5)
function add_SinmplePlugins_tinymce_plugin($plugin_array) {
$plugin_array['PluginsName'] = WSAP_URLPATH.’tinymce3/editor_plugin.js’;
return $plugin_array;
}

function SinmplePlugins_change_tinymce_version($version) {
return ++$version;
}

// 当你的tinyMCE插件改变了就修改tinyMCE插件版本号。
add_filter(‘tiny_mce_version’, ‘SinmplePlugins_change_tinymce_version’);

// 插件初始化
add_action(‘init’, ‘SinmplePlugins_addbuttons’);
}
?>

可能大家通过上面的代码还不明白，我这里简单讲述一下核心的东西。wp2.5版本把之前的钩子替换掉了，在wp2.5+中关系Tinymce3，主要是由以下两个钩子：
mce_buttons：通过一个以按钮名字做参数的（输入输出）PHP函数来注册按钮并返回。 “|”符合可以使用separator代替。
mce_external_plugins：通过一个输入输出PHP函数关联数组：’plugin_name’ => ‘plugin_url’
tiny_mce_version：通过版本号码作为一个字符串，它可以自动改变tinyMCE插件的版本号。

另外，tinymce插件是放在名为tinymce3的文件夹下面，当然名字是自定义的。对于tinymce插件这里还需要大家看一下tinymce3的文档，其配置文件名为editor_plugin.js，通过点击按钮加载的显示窗口的文件是window.php，然后再通过一个js脚本（tinymce.js）来把设置的内容添加到编辑器中。

// Docu : http://wiki.moxiecode.com/index.php/TinyMCE:Create_plugin/3.x#Creating_your_own_plugins

(function() {
// 多语言支持的插件标识，和langs的各个语言文件匹配
tinymce.PluginManager.requireLangPack(‘SimplePlugins’);

tinymce.create(‘tinymce.plugins.SimplePlugins’, {
/**
* 初始化插件， 在创建完成后就可以显示执行了
* @参数 {tinymce.Editor} ed 编辑器初始化点。
* @参数 {string} url 插件位置的绝对URL。
*/
init : function(ed, url) {
// 加载按钮时，执行此函数，名字以小写的mce开头，后面接注册插件的名字。
ed.addCommand(‘mceSimplePlugins’, function() {
ed.windowManager.open({
file : url + ‘/window.php’, //显示窗口的文件
width : 360 + ed.getLang(‘SimplePlugins.delta_width’, 0),
height : 210 + ed.getLang(‘SimplePlugins.delta_height’, 0),
inline : 1
}, {
plugin_url : url // 插件的绝对URL.
});
});

// 注册按钮
ed.addButton(‘SimplePlugins’, {
title : ‘SimplePlugins.desc’,
cmd : ‘mceSimplePlugins’,
image : url + ‘/simple.png’ //按钮的图标
});

// Add a node change handler, selects the button in the UI when a image is selected
ed.onNodeChange.add(function(ed, cm, n) {
cm.setActive(‘SimplePlugins’, n.nodeName == ‘MP3′);
});
},

/**
* Creates control instances based in the incomming name. This method is normally not
* needed since the addButton method of the tinymce.Editor class is a more easy way of adding buttons
* but you sometimes need to create more complex controls like listboxes, split buttons etc then this
* method can be used to create those.
*
* @param {String} n Name of the control to create.
* @param {tinymce.ControlManager} cm Control manager to use inorder to create new control.
* @return {tinymce.ui.Control} New control instance or null if no control was created.
*/
createControl : function(n, cm) {
return null;
},

// 插件信息
getInfo : function() {
return {
longname : ‘SimplePlugins’,
author : ‘icyleaf’,
authorurl : ‘http://www.icyleaf.cn/how-to-load-tinymce-plugins-for-wordpress’,
infourl : ‘http://www.icyleaf.cn’,
version : “1.0″
};
}
});

// 注册插件
tinymce.PluginManager.add(‘SimplePlugins’, tinymce.plugins.SimplePlugins);
})();

这个是一个典型的配置文件，不好意思英语很烂，只能简单翻译，在这个文件的开头是加载语言的标识，语言文件都放在其插件的langs文件夹下面，一每个国家的语言缩写作为其语言，比如，美式英语：en_US.js；中国的简体中文，那就是cn_ZH.js。

window.php是窗口显示的文件，这里就不在多说了，大家自己看下WS Auido Player插件的代码就知道了，那么如何把填写好的配置返回到编辑器里面呢，如果你注意看window.php，你会发现，他在提交时调用了一个js函数。这个函数是放在插件的tinymce.js文件里面。然后通过tinymce.js主函数的处理就把相关的代码插入到编辑器当中了：）