用 JS Quicktags 为 WordPress 评论添加简单的编辑器
曾经在 PhilNa 就见识过这功能强大的 JS 编辑器了, 开始因为不知道是这东西叫啥, 以为是插件什么的,也尝试下载过他的 PhilNa2主题, 经研究一番, 但自己能力有限, 最终还是放弃了, 今天在 Xiaorsz 瞎转悠时, 无意间发现了这篇: 用 quicktag 为 wordpress 评论框添加简单的编辑器, 这么详细的教程, 还怕学不会吗… 嘿, 先看截图吧.~
JS Quicktags: Home | Download JS File | Lite | Demo
这个 JS 就是 Quicktags, 功能便是在编辑框中方便地插入 tag , 方便文字的排版. 想必对 WP 比较了解的都应该知道它, 因为 WP 后台的编辑窗口也用到了这个 JS. JS Quicktags 现在已经升级到了 1.3.1 版, 支持插入的按钮标签达到了 29 个之多. 还有很多我都叫不上名字来的标签, 功能算是非常的强大!
看了演示页面的代码大家应该知道怎么用了, 非常的简单. 把这个 JS 文件下载下来以后, 在适当的位置载入, 建议只在有评论框的页面载入, 首页就没有必要了! 具体方法如下:
1. 载入 JS Quicktags 文件
在模板中 header.php 文件的 <head>…</head> 包囊里添加以下代码:
1 | <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/js_quicktags.js"></script> |
注意: 你需要将 src 后的地址改为你存放 js_quicktags.js 文件的路径.
2. 插入 JS 显示位置到评论
在 comments.php 文件中找到自己模版中评论输入框的位置, 例如:
1 | <textarea name="comment" id="comment" tabindex="4" rows="8" cols="50"></textarea> |
然后在上面插入代码:
1 | <script type="text/javascript">edToolbar('comment');</script> |
其中的参数 edToolbar 是不用改的, 是 js 文件中定义的函数; comment 是 textarea 的 ID, 一般也不用改.
OK, 功能方面的添加就完成了. 就会在自己的评论框上看到一排按钮了! 如果你还想对它进行一些优化的话那就还得继续. 
首先觉得这个默认的按钮太丑了, 想个性化一点,那我们可以来修改 CSS, 代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | /* quicktags START */ #ed_toolbar_comment input{ background: #f9f9f9; border: 1px solid #aaaaaa; font-size: 11px; color: #666; font-family: Arial, Helvetica, sans-serif; width: auto; margin: 1px 2px 0 0; padding: 0px 1px 0px 1px; } #ed_toolbar_comment input:hover{ border: 1px solid #888888; } /* quicktags END */ |
在这里稍微做了点改动, 其中的 ID ed_toolbar_comment 是 JS 自动生成的, 用 firebug 可以很容易的看到.
如果想和我这里的表情图标一样, 想在让它显示的时候在显示, 平时隐藏的话, 就要用 jQuery 来控制了, 当然 JS 也可以很方便的做到, 这里只提供 jQuery 的, 博客中没有载入 jQuery 的建议用 JS 实现!
先让 #ed_toolbar_comment 不显示, 然后在输入框下面加了一个小图片, 就是那个 B 了, 因为一直没有找到好一点的图片, 就先用这个了, 其实不怎么喜欢! 然后给它的 ID=”showcode”, 然后在 JS 中用下面的代码来控制 #ed_toolbar_comment 的显示和隐藏:
1 | $('#showcode').click(function(){$('#ed_toolbar_comment').slideToggle("slow");return false;}); |
到这里就算真正完工了, 当然那排按钮中的按钮有点太多了, 有些真的不会用到. 你只需要在 quicktag.js 文件中删除一些字段就 OK 了. 如有问题请留言或直接移步 Xiaorsz 查看原文.
参考资料: Xiaorsz’s Blog, sfox Blog.
