编辑“WordPress自定义TinyMCE按钮”

<span style="border:1px solid #000; text-align:center; float:right; padding:6px;"><strong>导航:</strong> [[WordPress插件及插件开发资源|上一页]] | {{Template:WordPress导航}}</span>
<div style="clear:both;"></div>
TinyMCE是WordPress内置的可视化编辑器，用户可以在TinyMCE中编辑日志和页面内容。TinyMCE编辑器本身自备多个按钮，用户也可以在TinyMCE的工具栏中添加一些自定义按钮。添加过程将由“插件”完成。本文向读者介绍了在TinyMCE中利用WordPress插件创建自定义按钮的方法。

文章假设用户对[http://www.wordpress.la/codex-%E6%8F%92%E4%BB%B6%E5%BC%80%E5%8F%91.html 插件开发]以及[http://www.wordpress.la/codex-%E6%8F%92%E4%BB%B6API.html 插件API]的基本用法有所了解。MCE插件本身也是[[JavaScript]]代码形式，因此用户还需要熟悉JavaScript、MCE编辑器的使用公约以及[[PHP]]语言。

注意：不同版本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指向包含插件文件的文件夹。

==加载语言文==
在TinyMCE 3中，语言文件都是ISO 639-1代码，该代码以WordPress当前所用语言的前两个字母来表示当前语言，如“de”表示德语，“fr”表示法语等。TinyMCE在my_plugin.js所在文件夹中查找一个名为“langs”的子文件夹。若插件被加载，TinyMCE会加载langs/[lang].js文件；若插件带有弹出式菜单，菜单弹出时TinyMCE会加载langs/[lang]_dlg.js 文件。

所有TinyMCE默认字符串都被翻译成WordPress支持的所有语言。插件可以使用任何一个或多个TinyMCE字符串；加载TinyMCE时可查看 tinyMCE.i18n js对象，了解怎样在js插件中引用这些字符串。

'''TinyMCE 3的其它变化'''

WordPress自身已经停止使用动作钩子"mce_options"，但仍然支持用户使用该动作函数。动作函数 "tinymce_before_init"被过滤器函数"tiny_mce_before_init"所取代。"tiny_mce_before_init"传递一个包含所有TinyMCE设置的php关联数组，数组中还包括其它过滤器函数返回的值。这些值可以替代mce_options。

为减少内存/[[服务器]]资源，装有TinyMCE以及所有默认插件的压缩文件被缓存在硬盘中。一旦init数组发生变动，或是调用tiny_mce_config时ver=[number]参数被修改，硬盘中的缓存就会失去效用。

过滤器函数"tiny_mce_version"以字符串形式传递版本号。该过滤器函数能够被不同插件多次修改，可使用以下代码：

 function my_refresh_mce($ver) 
 {  $ver += 3; // or $ver .= 3; or ++$ver; 
 etc.  return $ver;}add_filter('tiny_mce_version', 'my_refresh_mce');
用tiny_mce_before_init可以修改缓存在硬盘中的压缩文件，示例如下：
 function my_change_mce_settings( $init_array ) {    
 $init_array['disk_cache'] = false; // disable caching    
 $init_array['compress'] = false; // disable gzip compression    
 $init_array['old_cache_max'] = 3; 
 // keep 3 different TinyMCE configurations cached (when switching between several configurations regularly)
 } 
add_filter( 'tiny_mce_before_init', 'my_change_mce_settings' );

==延伸阅读==
下面是一些TinyMCE相关网站，我们可以从中了解怎样编写TinyMCE插件，以及怎样将TinyMCE从2.0系列版本转换为3.0版本：
*[http://wiki.moxiecode.com/index.php/TinyMCE:Create_plugin/3.x http://wiki.moxiecode.com/index.php/TinyMCE:Create_plugin/3.x]
*[http://wiki.moxiecode.com/index.php/TinyMCE:API http://wiki.moxiecode.com/index.php/TinyMCE:API]
*[http://wiki.moxiecode.com/index.php/TinyMCE:Index http://wiki.moxiecode.com/index.php/TinyMCE:Index] 

==相关条目==
*[[Drupal]] 
*[[OBLOG]] 
*[[X-Space]] 
*[[SaBlog-X]] 
*[[Bo-Blog]]

[[category:WordPress中文文档|Z]]
[[category:WordPress网站开发|Z]]
[[category:WordPress开发文档|Z]]