编辑“WordPress:TinyMCE Custom Buttons”
该编辑可以被撤销。 请检查下面的对比以核实您想要撤销的内容,然后发布下面的更改以完成撤销。
最后版本 | 您的文本 | ||
第1行: | 第1行: | ||
== Introduction == | == 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 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. | ||
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. | 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. | ||
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. | 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. | ||
== Creating an MCE Editor Plugin == | == Creating an MCE Editor Plugin == | ||
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 <tt>/wp-includes/js/tinymce/plugins</tt> directory. Or, check the Further Reading section at the bottom of this article for documentation on how to write MCE plugins. | 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 <tt>/wp-includes/js/tinymce/plugins</tt> directory. Or, check the Further Reading section at the bottom of this article for documentation on how to write MCE plugins. | ||
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. | 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. | ||
== Loading a TinyMCE 2 Plugin (Wordpress 2.1.x - 2.3.x) == | == Loading a TinyMCE 2 Plugin (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: | 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: | ||
* <tt>mce_plugins</tt> | * <tt>mce_plugins</tt> | ||
* <tt>mce_css</tt> | * <tt>mce_css</tt> | ||
第46行: | 第22行: | ||
Here is an example of how to hook into these filters and actions: | Here is an example of how to hook into these filters and actions: | ||
<pre> | <pre> | ||
第102行: | 第48行: | ||
add_action("tinymce_before_init", "my_plugin_load"); | add_action("tinymce_before_init", "my_plugin_load"); | ||
</pre> | </pre> | ||
== Loading a TinyMCE 3 Plugin (Wordpress 2.5) == | == Loading a TinyMCE 3 Plugin (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: | 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: | ||
* <tt>mce_buttons</tt>: passes in/out a php array with the button names; "|" can be used as separator. | * <tt>mce_buttons</tt>: passes in/out a php array with the button names; "|" can be used as separator. | ||
* <tt>mce_external_plugins</tt>: 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. | * <tt>mce_external_plugins</tt>: 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. | ||
There are also a couple of details covered in sections below, such as how to deal with languages. | 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: | Here is an example of how to use these filters: | ||
<pre> | <pre> | ||
function myplugin_addbuttons() { | function myplugin_addbuttons() { | ||
第155行: | 第85行: | ||
add_action('init', 'myplugin_addbuttons'); | add_action('init', 'myplugin_addbuttons'); | ||
</pre> | </pre> | ||
Note: when using the <tt>mce_external_plugins</tt> 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. | Note: when using the <tt>mce_external_plugins</tt> 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. | ||
=== Loading language files === | === 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. | 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. | ||
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. | 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. | ||
=== 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. | 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. | ||
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. | 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. | ||
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: | 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: | ||
<pre> | <pre> | ||
第237行: | 第111行: | ||
The compression, caching and number of different cached files to keep can be changed with tiny_mce_before_init, examples: | The compression, caching and number of different cached files to keep can be changed with tiny_mce_before_init, examples: | ||
<pre> | <pre> | ||
第256行: | 第116行: | ||
$init_array['disk_cache'] = false; // disable caching | $init_array['disk_cache'] = false; // disable caching | ||
$init_array['compress'] = false; // disable gzip compression | $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) | $init_array['old_cache_max'] = 3; // keep 3 different TinyMCE configurations cached (when switching between several configurations regularly) | ||
} | } | ||
第264行: | 第122行: | ||
</pre> | </pre> | ||
== Further Reading == | == Further Reading == | ||
Help for writing TinyMCE plugins or converting them from 2.x to 3 can be found on TinyMCE's documentation site: | Help for writing TinyMCE plugins or converting them from 2.x to 3 can be found on TinyMCE's documentation site: | ||
* 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 | ||
第283行: | 第130行: | ||
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 [http://downloads.wordpress.org/plugin/vipers-video-quicktags.5.4.4.zip Viper's Video Quicktags plugin]. | 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 [http://downloads.wordpress.org/plugin/vipers-video-quicktags.5.4.4.zip Viper's Video Quicktags plugin]. | ||