定义 TinyMCE 快捷按钮

Wady · 12:03 AM

升级到 WordPress 2.1 RC1 后，在修改 TinyMCE 的语言文件的时候突然对 tiny_mce_config.php 这个文件起了兴趣。不想打开一看发现了丰富 TinyMCE 快捷按钮的方法。

原来，这个编辑器里的 wordpress 插件有提供 'wp_adv'、'wp_adv_start'、'wp_adv_end' 三个 TinyMCE 快捷栏标签。所有位于 'wp_adv_start' 与 'wp_adv_end' 之间的按钮标签都会被放置于一个被 display:none 的 div 中。而 'wp_adv' 这个按钮标签的作用就是展开这个被 display:none 的 div。不过奇怪的是 WordPress 默认把 'wp_adv' 也置于了 'wp_adv_start' 与 'wp_adv_end' 之间，结果就是被隐藏的按钮永世不得翻身，哈哈。知道了原理解救就很简单了。

TinyMCE 在 tiny_mce_config.php 文件里有设置3个可选的快捷栏，分别是 $mce_buttons、$mce_buttons2、$mce_buttons3。WordPress 里的这个 TinyMCE 版本最多刚好排满两行，由于有 'wp_adv' 这个按钮我们只需要排一行就可以拉，为了美观嘛。我把我的 $mce_buttons 修改提供出来作为参考，如下：

引用:

$mce_buttons = apply_filters('mce_buttons', array('bold', 'italic', 'underline', 'strikethrough', 'sub', 'sup', 'separator', 'bullist', 'numlist', 'outdent', 'indent', 'separator', 'justifyleft', 'justifycenter', 'justifyright', 'justifyfull', 'separator', 'link', 'unlink', 'image', 'wp_more', 'wp_page', 'separator', 'forecolor', 'backcolor', 'charmap', 'separator', 'undo', 'redo', 'wp_adv', 'separator', 'wp_help', 'wp_adv_start','formatselect', 'fontselect', 'fontsizeselect', 'separator', 'cut', 'copy', 'paste', 'pastetext', 'pasteword', 'removeformat', 'cleanup', 'separator', 'ltr', 'rtl', 'wp_adv_end'));

默认显示的

展开后的

需要说明的是，上面的 'ltr', 'rtl', 是 TinyMCE 插件 directionality 提供的，不过 WordPress 默认没有加载这个插件，费解！加载方法很简单，在 $plugins = array() 中插入 'directionality'，如：$plugins = array('inlinepopups', 'autosave', 'paste', 'wordpress', 'directionality');

下面我把 WordPress 中自带的 TinyMCE 全部的按钮标签列一下：

引用:

'separator' —— 分隔符
'bold' —— 粗体
'italic' —— 斜体
'underline' —— 下划线
'strikethrough' —— 删除线
'sub' —— 上标
'sup' —— 下标
'bullist' —— 无序列表
'numlist' —— 有序列表
'outdent' —— 减少缩进
'indent' —— 增加缩进
'justifyleft' —— 局左
'justifycenter' —— 局中
'justifyright' —— 局右
'justifyfull' —— 两端对齐
'link' —— 添加/编辑链接
'unlink' —— 撤销链接
'image' —— 插入图片
'forecolor' —— 字体颜色
'backcolor' —— 字体背景色
'charmap' —— 特殊符号表
'undo' —— 撤销
'redo' —— 重做
'formatselect' —— 格式选择
'fontselect' —— 字体选择
'fontsizeselect' —— 字号选择
'cut' —— 剪切
'copy' —— 复制
'paste' —— 粘贴
'pastetext' —— 以纯文本格式粘贴
'pasteword' —— 粘贴 Word 格式内容（这几个粘贴功能还是有点用的，因为这个编辑器在 IE7 下使用 Ctrl + V 粘贴的时候，编辑框内的焦点会跳到第一行去）
'removeformat' —— 移除格式
'cleanup' —— 删除冗余代码
'ltr' —— 内容从左到右显示（语言文字方向性定义，似乎中文里用不上）
'rtl' —— 内容从右到左显示（同上）
'code' —— 打开HTML代码编辑器
'spellchecker' —— 拼写检查
'hr' —— 插入水平线
'anchor' —— 插入锚标记
'newdocument' —— 新建文档（效果和清空内容重写差不多）
'wp_more' —— 插入 more 标签
'wp_page' —— 插入分页标签
'wp_help' —— 帮助
'wp_adv' —— 隐藏按钮显隐开关
'wp_adv_start' —— 隐藏按钮区起始部分
'wp_adv_end' —— 隐藏按钮区结束部分

另外修改 wordpress 插件里的两个 CSS 文件可以调整编辑窗口里的一些可视化式样。我是全部改成了和前台显示一样的式样了。

原文地址：http://www.myyu.net/2007/01/custom-tinymce.html