编辑“WordPress自定义TinyMCE按钮”（章节）

==创建一个MCE编辑器插件==
首先我们要新建一个MCE插件（JavaScript）文件，从而将插件插入MCE编辑器并定义插件的行为。我们可以在/wp-includes/js/tinymce/plugins   中了解相关信息，也可以在文章最下方“延伸阅读”中查找有关编写MCE插件的资料。

最终得到的是一个[[JavaScript]]文件，可能还包括一个[[CSS]]样式文件以及一个定义MCE插件的[[HTML]]文件。文章接下来会告诉大家怎样将MCE插件从[http://www.wordpress.la/plugin.html WordPress插件]中加载到WordPress的TinyMCE编辑器。

<strong>下载TinyMCE 2 插件（WordPress 2.1系列至WordPress 2.3系列）</strong>
为了把MCE插件连接到TinyMCE 2（WordPress 2.1——WordPress   2.3时期的MCE版本）中，我们要利用下面几个过滤器钩子和动作钩子：
*mce_plugins   
*mce_css   
*mce_buttons   
*tinymce_before_init 
 

===TinyMCE自定义按钮===
由 Nicolena 于 星期三, 2009/08/05 - 14:02 发表 TinyMCE 插件  

TinyMCE是WordPress内置的可视化编辑器，用户可以在TinyMCE中编辑日志和页面内容。TinyMCE编辑器本身自备多个按钮，用户也可以在TinyMCE的工具栏中添加一些自定义按钮。添加过程将由“插件”完成。本文向读者介绍了在TinyMCE中利用WordPress插件创建自定义按钮的方法。

文章假设用户对插件开发以及插件API的基本用法有所了解。MCE插件本身也是JavaScript代码形式，因此用户还需要熟悉JavaScript、MCE编辑器的使用公约以及PHP语言。

注意：不同版本WordPress的TinyMCE版本也不尽相同，因此添加按钮的方式也可能有所不同，具体见下文。

===创建一个MCE编辑器插件===
首先我们要新建一个MCE插件（[[JavaScript]]）文件，从而将插件插入MCE编辑器并定义插件的行为。我们可以在/wp-includes/js/tinymce/plugins 中了解相关信息，也可以在文章最下方“延伸阅读”中查找有关编写MCE插件的资料。

最终得到的是一个JavaScript文件，可能还包括一个[[CSS]]样式文件以及一个定义MCE插件的[[HTML]]文件。文章接下来会告诉大家怎样将MCE插件从WordPress插件中加载到WordPress的TinyMCE编辑器。

'''下载TinyMCE 2 插件（WordPress 2.1系列至WordPress 2.3系列）'''

为了把MCE插件连接到TinyMCE 2（WordPress 2.1——WordPress 2.3时期的MCE版本）中，我们要利用下面几个过滤器钩子和动作钩子：

*mce_plugins 
*mce_css 
*mce_buttons 
*tinymce_before_init 
下面的例子展示了勾入以上过滤器钩子和动作钩子的方法：

 function &my_plugin(&$plugins) {  
 $plugins[] = "-my_plugin"; 
 // the leading "-" means it's an external plugin   
 return $plugins;
 }
 function my_plugin_css($css) {  
 return $css . "," . MY_WEB_PREFIX . "/tinymce/my_plugin/content.css";
 } 
 function &my_plugin_button(&$buttons) {  
 $buttons[] = "separator";  $buttons[] = "my_plugin";  return $buttons;
 } 
 function my_plugin_load() {  
 echo "tinyMCE.loadPlugin('my_plugin', '" . MY_WEB_PREFIX . "/tinymce/my_plugin');\n";
 } 
 add_filter("mce_plugins", "my_plugin");
 add_filter("mce_css", "my_plugin_css");add_filter("mce_buttons", "my_plugin_button");
 add_action("tinymce_before_init", "my_plugin_load");

'''下载TinyMCE 3 插件（WordPress 2.5）'''

为了把MCE插件连接到TinyMCE 3（WordPress 2.5中的MCE版本）中，我们要利用下面几个过滤器钩子：

*mce_buttons：传入/传出一个带有按钮名称的php数组；可用“|”表示分隔符。 
*mce_external_plugins：传入/传出一个php关联数组'plugin_name' => 'plugin_url'。其中“url”应是绝对URL且与WordPress安装文件域名相同。 
插件语言转换等细节问题也会在之后提到。

下面是一个使用mce_buttons与mce_external_plugins过滤器钩子的示例：
 function myplugin_addbuttons() {   
 // Don't bother doing this stuff if the current user lacks permissions   
 if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') )     
 return;    
 // Add only in Rich Editor mode   
 if ( get_user_option('rich_editing') == 'true') {     
 add_filter("mce_external_plugins", "add_myplugin_tinymce_plugin");    
 add_filter('mce_buttons', 'register_myplugin_button');   }
 } 
 function register_myplugin_button($buttons) {   
 array_push($buttons, "separator", "myplugin");   
 return $buttons;
 } 
 // Load the TinyMCE plugin : editor_plugin.js (wp2.5)
 function add_myplugin_tinymce_plugin($plugin_array) {   
 $plugin_array['myplugin'] = URLPATH.'tinymce/editor_plugin.js';   
 return $plugin_array;
 } 
 // init process for button controladd_action('init', 'myplugin_addbuttons');
注意：在上面这个例子中，使用mce_external_plugins过滤器钩子时，url应指向实际插件文件。而在TinyMCE 2.X系列中，url指向包含插件文件的文件夹。
说明	输入内容	输出结果
斜体	''斜体文字''	斜体文字
粗体	'''粗体文字'''	粗体文字
粗斜体	'''''粗斜体文字'''''	*粗斜体文字*