TinyMCE自定义按钮-WordPress啦

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');
";
}
 
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 control
add_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版本：

分类：中文手册

首页 > 中文手册 > TinyMCE自定义按钮