WordPress默认TinyMCE编辑器增加彩色美化框自定义按钮
编辑:狂族晨曦 来源:WordPress技巧 日期:2016-06-16 阅读: 7,611 次 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的自定义按钮就显得很小儿科了,方法先森过两天再分享出来。
转载请注明出处来自https://www.capjsj.cn/tinymce_caise_anniu.html
好久没来了,过来瞧瞧。
代码框里面的代码怎么是乱的
@杰伦视频网: 要等一会儿才会把代码框的外壳加载出来、、、
@狂族晨曦: 今天加载挺快的
搞这么多不同颜色的框,那得多么丰富的内容才能用得上啊!
@Koolight: 又不是在一篇文章中添加所有颜色的,只在需要的时候添加即可。我认为是绿色摘要、引用,黄色提醒,粉红色警告,灰色引用链接,各种颜色功能不同吧,看怎么用了。
@闲鱼: 主要是并不是所有人都用的知更鸟的嘛,他们就没有你这么方便了
确实用得上
大神们经常搞点东西出来,羡煞不懂技术的人
这种高亮显示对于经常插入代码来说,体验上很好。
没啥多少内容好像用不上
这个弄着还不错
太过聚焦在技术上,就有些过了吧
好东西!我一般都是看到喜欢的直接扒来!
不错哦,谢谢博主分享
挺不错的!虽然我也想折腾一下,不过怕不适合zlog!
一切的美化都是基于CSS的 学习CSS是绝对有必要的
找了一大圈,终于找到了!感谢。
QTags.addButton( ‘ 按钮ID‘, ‘按钮显示名‘, ‘点一下输入内容‘, ‘点一下关闭内容‘ );
按钮ID和点一下输入内容中的ID不一样!是不是有错误啊?
@堆爱博客: 不是错误,两个ID的作用不一样,按钮ID是区分按钮的,标签ID是用于定义CSS代码的。
为什么我没有整出来!