为评论框添加简单的编辑器
是否感觉在WordPress博客上书写评论需要添加代码的时候要手动输入很是麻烦？今天sfox就给大家介绍为你的评论框添加一个简易编辑器的方法，通过JS实现，几步操作即可搞定，无需使用插件。当然，你也可以用插件来实现，MCEComments 就是一个不错的选择。但对于大多数bloggers来说，使用插件是一个不得已的方法，如果可以通过修改代码实现的话还是少用插件为妙。
这个方法的整体思路是：添加实现编辑器的核心-JS代码文件 –> 在CSS中添加编辑器的样式代码 –> 在header中调用JS代码 –> 在comments.php文件中使用div布局并调用显示编辑器的函数
1. 下载实现编辑器的核心文件 quicktags.js ，并上传至自己的网站
下载 quicktags.rar (2.99Kib)
2. 在你所使用主题的style.css文件中的评论样式处添加以下代码，实现编辑器的样式（可根据自己的喜好进行适当的修改）：
/******* Begin Quicktags *******/
.quicktags {
margin-top: 10px;
}
.quicktags input {
background: #f9f9f9;
border: 1px solid #aaaaaa;
font-size: .9em;
color: #666;
font-family: Arial, Helvetica, sans-serif;
width: auto;
margin: 1px 2px 2px 0px;
padding: 0px 1px 0px 1px;
}
.quicktags input:hover {
border: 1px solid #cc0033;
}
/******* End Quicktags *******/
.quicktags {
margin-top: 10px;
}
.quicktags input {
background: #f9f9f9;
border: 1px solid #aaaaaa;
font-size: .9em;
color: #666;
font-family: Arial, Helvetica, sans-serif;
width: auto;
margin: 1px 2px 2px 0px;
padding: 0px 1px 0px 1px;
}
.quicktags input:hover {
border: 1px solid #cc0033;
}
/******* End Quicktags *******/
3. 将下面的代码添加到模板中header.php文件的<head>…</head>区域内：
<script type="text/javascript" src="/.../.../quicktags.js"></script>
注意：你需要将src后的地址改为你存放 quicktags.js 文件的路径。
4. 在主题的comments.php文件中找到以下代码（评论框）：
<p><textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea></p>
将其修改为：
<p><div class="quicktags"><script type="text/javascript">displayQuicktags('comment');</script></div>
<textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea></p>
<textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea></p>
OK了，看看文章下的评论框上方是不是多了几个可爱的按钮？以后就不用为需要手动输入代码标签而烦恼了！你还可以在 quicktags.js 中添加其它的标签来丰富你的编辑器。
Random Posts:
- 免费高质Photoshop笔刷下载 - Qbrushes - 九月 19, 2008
- 如何使 WP-Cumulus 插件支持显示中文标签云 - 十二月 29, 2008
- WordPress开发设计者工具箱（二）技术教程篇 - 十月 2, 2008
- Firefox 3 扩展组件大赛得奖作品 - 八月 22, 2008
- 7条创世界纪录的市区街道 - 八月 18, 2008
- 11月Twitter应用网站推荐 - 十二月 1, 2008
- 发放远景论坛及Wopus中文社区邀请码 - 八月 23, 2008
- WordCamp China 2008 记录集 - 九月 22, 2008
- 【每周推荐】WordPress主题推荐 08/12/07 - 十二月 7, 2008
- 如何在侧边栏显示评论最多的日志 - 八月 8, 2008
Leave a Reply
PostRank: 1.0 | TotalViews: 436 times
PostRank: 1.0 | TotalViews: 436 times 
.text:''):(d.getSelection?d.getSelection():'');void(keyit=window.open('http://my.poco.cn/fav/storeIt.php?t='+escape(d.title)+'&u='+escape(d.location.href)+'&c='+escape(t)+'&img=http://www.h-strong.com/blog/logo.gif','keyit','scrollbars=no,width=475,height=575,status=no,resizable=yes'));keyit.focus(); "添加到 POCO 网摘"){kind=logo}
十一月 11th, 2008 at 8:45 上午
quicktags.rar压缩包有错误，打不开！
[回复这位小朋友]
十一月 11th, 2008 at 11:49 下午
感谢你的反映，文件已经修复，请重新下载
[回复这位小朋友]
十一月 11th, 2008 at 10:54 上午
一看到添加js就兴致不大了…慢慢等吧 sofish那里有个新皮等着我…哈哈
[回复这位小朋友]
十一月 11th, 2008 at 11:51 下午
真是爽呆了，有人帮你免费做皮。。。我也要！！
[回复这位小朋友]
十一月 13th, 2008 at 7:13 下午
提交评论的时候报错，不知道怎么回事啊？
[回复这位小朋友]
十一月 14th, 2008 at 2:41 上午
可能是我的插件装得多了点。。
[回复这位小朋友]
十一月 23rd, 2008 at 10:20 上午
下载文件解压报错！
[回复这位小朋友]
十一月 23rd, 2008 at 3:38 下午
@Rui Shen
晕，又出问题了。。郁闷。应该是插件的问题，改到外链了，请重新下载~~
[回复这位小朋友]
十二月 2nd, 2008 at 10:11 下午
很不错,学习了!!回去用下!
[回复这位小朋友]
十二月 5th, 2008 at 12:35 下午
确实很好地一个插件
不过步骤3里面的
<?php
似乎有些多余
[回复这位小朋友]
十二月 5th, 2008 at 12:54 下午
学习了
[回复这位小朋友]
十二月 6th, 2008 at 12:49 上午
@jack
这个不是plugin。。
那个
< ?php不是我写的，是因为我将pre的类型设定成php了，自动添加的，现在改成html的就好了~[回复这位小朋友]
十二月 28th, 2008 at 10:00 上午
#menus li a.home {background-position:0 -93px;
width:45px;
padding:0;
margin-left:0;
text-indent:-999em;
}
不知道你这有用没啊，我那边加了代码标签，感觉没什么效果！
[回复这位小朋友]
一月 1st, 2009 at 1:42 下午
@达米安,
text-indent:-999em;是会把文字给隐藏的。建议您使用我给出的CSS样式试试~~[回复这位小朋友]
一月 2nd, 2009 at 7:39 上午
@sfox, 你代码高亮用的什么插件？是不是和插件有关啊！
[回复这位小朋友]
一月 2nd, 2009 at 4:41 下午
@达米安, 我用的coolcode，这个应该与代码高亮插件没关系的，我已经隐藏了行号
[回复这位小朋友]
十二月 29th, 2008 at 7:47 下午
为什么留言的时候点那个+不能增大留言框？
[回复这位小朋友]
一月 1st, 2009 at 1:43 下午
@kerby, 这个应该是主题中JS有冲突了，暂时未发现是哪里出的问题，不过您使用应该不会发生这样情况的~~
[回复这位小朋友]