WordPress自定义TinyMCE按钮

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

导航: 上一页 | 首页 | WordPress中文论坛 | WordPress主机 | CMS程序 | 论坛程序 | ECShop | ShopNC | PowerEasy

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


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版本：

相关条目[ ]

取自“https://www.zzbaike.com/wiki/WordPress自定义TinyMCE按钮?oldid=43130”