WordPress默认TinyMCE编辑器增加彩色美化框自定义按钮

编辑：狂族晨曦 来源：WordPress技巧 日期：2016-06-16 阅读： 6,491 次 22 条评论 » 百度已收录

先森在新的友链伙伴闲鱼博客那里看到了一篇技术文，介绍的是WordPress短代码实现文章添加彩色美化框。可能看标题大家不太明白说的是什么，其实就是指的包裹着这段话的绿框框。

先森觉得其美化效果是有了，但是却并不方便，所以对整个代码做了修改，增加了几个WordPress默认TinyMCE编辑器自定义按钮。点击按钮直接插入标签，更加方便实用。

效果展示

绿色输入框：输入文字

红色提示框：输入文字

黄色提示框：输入文字

灰色提示框：输入文字

这种彩色美化框非常常见，尤其是实用知更鸟主题的博客，先森的友链都有很多是实用的知更鸟主题。相信无论是知更鸟主题，还是这种美化框，都是很受欢迎的。

效果实现

在闲鱼博客那里，先森发现使用的是短代码实现的。但当先森研究了一下WordPress默认TinyMCE编辑器增加自定义按钮的时候发现，其实可以直接省略短代码那一步了，来看看怎么实现的吧。

1.更改编辑器默认视图为HTML

大家都知道，在后台新建文章后，编辑器就自动跳转到“可视化”视图，对于一些经常要插入代码或者WEB设计者们来说，可能更习惯使用HTML视图手动编辑。

设置方法：将以下代码添加到主题的functions.php文件里即可：

//更改编辑器默认视图为HTM
add_filter('wp_default_editor', create_function('', 'return "html";'));

2.新增WordPress默认TinyMCE编辑器自定义按钮

在WordPress主题的functions.php最后一个?>前加入一下代码：

//添加HTML编辑器自定义快捷标签按钮
add_action('after_wp_tiny_mce', 'bolo_after_wp_tiny_mce');
function bolo_after_wp_tiny_mce($mce_settings) {
?>
<script type="text/javascript">
QTags.addButton( 'v_notice', '绿色提示框', '<blockquote id="sc_notice">输入文字</blockquote>\n', "" );
QTags.addButton( 'v_error', '红色提示框', '<blockquote id="sc_error">输入文字</blockquote>\n', "" );
QTags.addButton( 'v_warn', '黄色提示框', '<blockquote id="sc_warn">输入文字</blockquote>\n', "" );
QTags.addButton( 'v_tips', '灰色提示框', '<blockquote id="sc_tips">输入文字</blockquote>\n', "" );
</script>
<?php
}

其中，主要设置自定义按钮的是这个函数：

QTags.addButton( ”, ”, ”, ” );

【四对引号，分别表示按钮的ID、按钮显示名、点一下输入内容、再点一下关闭内容（最后一对引号为空则一次输入全部内容），\n表示换行】

形象说明：

 QTags.addButton( ‘ 按钮ID‘, ‘按钮显示名‘, ‘点一下输入内容‘, ‘点一下关闭内容‘ );

可以自定义添加多行 QTags.addButton( ”, ”, ”, ” ); 增加多个按钮！

3.CSS美化

将css代码放入主题的style.css文件中或其他地方：

/*彩色美化框*/
#sc_notice { color: #7da33c; background: #ecf2d6 url('images/sc/sc_notice.png') -1px -1px no-repeat; border: 1px solid #aac66d; overflow: hidden; margin: 10px 0; padding: 15px 15px 15px 35px;width: 98%; }
#sc_warn, .post-password-form { color: #ad9948; background: #fff4b9 url('images/sc/sc_warn.png') -1px -1px no-repeat; border: 1px solid #eac946; overflow: hidden; margin: 10px 0; padding: 15px 15px 15px 35px;width: 98%; }
#sc_error { color: #c66; background: #ffecea url('images/sc/sc_error.png') -1px -1px no-repeat; border: 1px solid #ebb1b1; overflow: hidden; margin: 10px 0; padding: 15px 15px 15px 35px;width: 98%; }
#sc_tips {color: #7da33c;background: #ecf2d6 url('images/sc/sc_tips.png') -1px -1px no-repeat;border: 1px solid #aac66d;padding: 15px 15px 5px 35px;margin: 10px 0;width: 98%;overflow: hidden;}

CSS代码中有4个图标链接，请将链接改为你保存的位置

图标素材下载：链接: http://pan.baidu.com/s/1bo3ziCB 密码: chxs(成航先森)

4.后台效果

完成以上步骤后，打开文章编辑界面，应该会看到以下效果：

实现后台效果

使用时，只需要将“输入文字”改为需要的文字即可。

写在最后

先森从开始WordPress建站之后，就将WordPress默认的TinyMCE编辑器换成了百度UEditor编辑器了，所以为了完成本文的效果还费了点功夫来熟悉默认编辑器。先森是两步一起走，同时还实现了为UEditor编辑器增加同样功能的自定义按钮。相较于UEditor，TinyMCE的自定义按钮就显得很小儿科了，方法先森过两天再分享出来。