WordPress:TinyMCE Custom Buttons

来自站长百科
跳转至： 导航、​ 搜索

Introduction[ ]

介绍[ ]

TinyMCE is the name of the visual editor that comes with WordPress, which can be used to edit post and page content. It comes with a variety of buttons, but it is also possible to add your own buttons to the editor toolbar, and otherwise change the editor's behavior. This is done by adding a "plugin" to the MCE editor, and this article demonstrates how to set up a WordPress plugin to do that.

TinyMCE是WordPress编辑器名称，可以用来编辑文章和网页内容，拥有许多按钮，还可以将你自己的按钮，添加到编辑器工具栏；更改编辑器操作。将"插件"添加到MCE编辑器，可以为编辑器添加按钮，这篇文章描述了怎样创建WordPress插件，实现上述操作。

This article assumes that you are already familiar with the basics of WordPress:Writing a Plugin and the WordPress:Plugin API of hooks and filters. Also, the MCE plugins themselves are written in JavaScript, so you will need to be familiar with JavaScript and the MCE editor conventions, as well as PHP programming.

阅读这篇文章的前提是你已经熟悉了编写插件和hooks和filters的插件API的基本知识。此外，MCE插件自身是由JavaScript编写的，因此你需要熟悉JavaScript和MCE编辑器的习惯用法，同时要熟悉PHP程序。

Note: TinyMCE was upgraded from version 2 in WordPress 2.1 to 2.3, to version 3 in WordPress 2.5. So, the techniques for adding buttons have changed accordingly; see below.

注：TinyMCE由WordPress2.1到2.3版本时，的第二版本升级到WordPress2.5时，的第三版本。因此，添加按钮的方法，也相应地改变了，请看看下面的。

Creating an MCE Editor Plugin[ ]

创建MCE 编辑器插件[ ]

The first step in adding a plugin to the MCE editor is to define your plugins's behavior, by creating an MCE plugin (JavaScript) file. You can get some ideas on how to do that by looking at the existing editor plugins distributed with WordPress, which are in the /wp-includes/js/tinymce/plugins directory. Or, check the Further Reading section at the bottom of this article for documentation on how to write MCE plugins.

将插件添加到MCE编辑器，首先要通过创建MEC插件（JavaScipt）文件，确定插件操作行为。通过查看/wp-includes/js/tinymce/plugins目录中，WordPress当前发行的编辑器插件，你将知道怎样确定插件操作。或者查看这篇文章结尾部分的深入阅读部分，查看关于怎样编写MCE插件的文档。

The result is that you will create a JavaScript file, and perhaps also a CSS style file and HTML file that define your MCE plugin. The next sections show how to make your MCE plugin get loaded into the editor in WordPress, from within a WordPress plugin.

最后，你可能创建了JavaScript文件，CSS样式文件以及定义MCE插件的HTML文件。下面的部分，介绍了怎样使得MCE插件，载入进WordPress插件内的WordPres编辑器。

Loading a TinyMCE 2 Plugin (Wordpress 2.1.x - 2.3.x)[ ]

载入TinyMCE 2 插件(Wordpress 2.1.x - 2.3.x)[ ]

In order to hook an MCE plugin into TinyMCE 2 (which is the MCE version present in WordPress 2.1 through 2.3), you need to hook into several filters and actions:

为了将MCE插件置入TinyMCE2（是WordPress2.1到2.3版本中出现的MCE版本），你需要hook into一些filters和actions：

  • mce_plugins
  • mce_css
  • mce_buttons
  • tinymce_before_init
  • mce_plugins
  • mce_css
  • mce_buttons
  • tinymce_before_init

Here is an example of how to hook into these filters and actions: 下面是怎样hook into这些filters和actions的例子： 

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");




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");


Loading a TinyMCE 3 Plugin (Wordpress 2.5)[ ]

载入 TinyMCE 3插件(Wordpress 2.5)[ ]

In order to hook an MCE plugin into TinyMCE 3 (which is the MCE version present in WordPress 2.5), you need to hook into the following filters:

为了将MCE插件置入TinyMCE3（是WordPress2.5中的MCE版本），你需要hook into这些filters：

  • mce_buttons: passes in/out a php array with the button names; "|" can be used as separator.
  • mce_buttons: 使用按钮名，传入/输出php数组; "|"可以作为分隔符。


  • mce_external_plugins: passes in/out an associative php array 'plugin_name' => 'plugin_url'. The url should be absolute and on the same domain as your WordPress installation.
  • mce_external_plugins:传入/导出相关的php数组'plugin_name' => 'plugin_url'。url必须是绝对的，而且与你安装WordPress的网域相同。

There are also a couple of details covered in sections below, such as how to deal with languages.

下面的部分也有一些详细信息，例如，怎样处理语言。

Here is an example of how to use these filters:

下面的例子，关于怎样使用这些filters: 

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');




function myplugin_addbuttons() {
   // 如果当前用户缺少权限，不要厌烦做这个步骤
   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_myplugin_tinymce_plugin");
     add_filter('mce_buttons', 'register_myplugin_button');
   }
}
 
function register_myplugin_button($buttons) {
   array_push($buttons, "separator", "myplugin");
   return $buttons;
}
 
//载入TinyMCE插件: editor_plugin.js (wp2.5)
function add_myplugin_tinymce_plugin($plugin_array) {
   $plugin_array['myplugin'] = URLPATH.'tinymce/editor_plugin.js';
   return $plugin_array;
}
 
//按钮控制的初始化过程
add_action('init', 'myplugin_addbuttons');


Note: when using the mce_external_plugins filter, the url should point to the actual plugin file, as in the example above. For TinyMCE 2.x it points to the directory containing the file.

注：使用mce_external_plugins filter时，如上面例子显示的，url应该指向真正的插件文件。TinyMCE2.x指向包含文件的目录。

Loading language files[ ]

载入语言文件[ ]

In TinyMCE 3, the language codes are only ISO 639-1, which is just the first 2 letters from WordPress locale, like "de", "fr", "es", etc. TinyMCE will look for a sub-directory named "langs" in the directory where my_plugin.js is located. It will load langs/[lang].js when a plugin is loaded and if the plugin has a popup, it will load langs/[lang]_dlg.js when the popup is opened.

在TinyMCE3中，语言代码仅仅是ISO 639-1，是WordPress本地化语言的前两个字母，如"de", "fr", "es",等等。TynyMCE会查找my_plugin.js位于的目录中命名为"langs"的子目录。载入插件的时候，会载入langs/[lang].js，如果插件有弹开窗口，窗口打开的时候，会载入langs/[lang]_dlg.js。

All default TinyMCE strings are translated to all languages available in WordPress. A plugin can use any of these strings; check the tinyMCE.i18n js object when TinyMCE is loaded to see how to reference them within your js plugin.

所有默认的TinyMCE字符串都翻译为WordPress中所有不同的语言。插件可以使用任何字符串；载入TinyMCE的时候，查看tinyMCE.i18n，了解怎样使用你的js插件，提及这些。

Other changes for TinyMCE 3[ ]

Other changes for TinyMCE 3的其它变化[ ]

The action "mce_options" is still supported, but deprecated. The action "tinymce_before_init" is replaced by a filter "tiny_mce_before_init". It passes an associative php array with all TinyMCE settings, including the output from the other filters and can be used in place of mce_options.

action "mce_options"仍然得到支持，但是已经取消了。action "tinymce_before_init"已经由filter "tiny_mce_before_init"取代。使用所有的TinyMCE设置，包括其它filters中输出的内容，传递了相关的php数组，可以用来代替mce_options。

The zipped file containing TinyMCE plus all default plugins is cached on disk to save some memory/server resources. This cache is invalidated by any change to the init array or by changing the ver=[number] argument when calling tiny_mce_config.

包含TinyMCE和所有默认插件的压缩文件在硬盘中储存，来保存内存/服务器资源。更改init数组或者调用tiny_mce_config时，更改ver=[number]参数，缓存都会无效。

The filter "tiny_mce_version" passes the version number as a string. It can easily be changed several times by different plugins. All of these will work:

filter "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');

function my_refresh_mce($ver) {
  $ver += 3; // or $ver .= 3; or ++$ver; etc.
  return $ver;
}
add_filter('tiny_mce_version', 'my_refresh_mce');

The compression, caching and number of different cached files to keep can be changed with tiny_mce_before_init, examples:

可以由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' );



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' );


Further Reading[ ]

深入阅读[ ]

Help for writing TinyMCE plugins or converting them from 2.x to 3 can be found on TinyMCE's documentation site:

可以在TinyMCE的文档站点中找到关于编写TinyMCE插件或者将插件从2.x转变为3的相关内容：

For good examples on how to integrate with WP's TinyMCE 2 (WP < 2.5) and 3 (WP >= 2.5), as well as buttonsnap, I recommend checking out the source of Viper's Video Quicktags plugin.

关于怎样将WP的TinyMCE2（WP<2.5）和3（WP>=2.5）相结合，以及buttonsnap的例子，我建议你查看Viper's Video Quicktags 插件中的资源。

取自“https://www.zzbaike.com/wiki/index.php?title=WordPress:TinyMCE_Custom_Buttons&oldid=10306”