【推荐】为评论框添加简单的编辑器
[b]本文来源：[url]http://imsfox.com/simple-editor-for-comments.fox[/url][/b][b]转载请注明出处！[/b]
是否感觉在[url=http://imsfox.com/tag/wordpress]WordPress[/url]博客上书写评论需要添加代码的时候要手动输入很是麻烦？今天[url=http://imsfox.com/author/sfox]sfox[/url]就给大家介绍为你的评论框添加一个简易编辑器的方法，通过JS实现，几步操作即可搞定，无需使用插件。当然，你也可以用插件来实现，MCEComments 就是一个不错的选择。但对于大多数[url=http://imsfox.com/tag/blogger]bloggers[/url]来说，使用插件是一个不得已的方法，如果可以通过修改代码实现的话还是少用插件为妙。
[img]http://i349.photobucket.com/albums/q393/sfoxnokis/BlogPic0811/quicktags.jpg[/img]
这个方法的整体思路是：添加实现编辑器的核心-JS代码文件 –> 在CSS中添加编辑器的样式代码 –> 在header中调用JS代码 –> 在comments.php文件中使用div布局并调用显示编辑器的函数
[b]1.[/b] 下载实现编辑器的核心文件 quicktags.js ，并上传至自己的网站
文件下载地址：[url]http://imsfox.com/simple-editor-for-comments.fox[/url]
[b]2.[/b] 在你所使用主题的[b]style.css[/b]文件中的评论样式处添加以下代码，实现编辑器的样式（可根据自己的喜好进行适当的修改）：
[list=1][*][color=Gray]/[/color][color=Blue]*******[/color]
[color=Blue]Begin[/color]
[color=Blue]Quicktags[/color]
[color=Blue]*******[/color][color=Gray]/[/color][*][color=Blue].quicktags[/color]
[color=Olive]{[/color][*]
[color=Green]margin-top:[/color]
[color=Maroon]10[/color][color=Red]px[/color][color=Gray];[/color][*][color=Olive]}[/color][*]
[*][color=Blue].quicktags[/color]
[color=Blue]input[/color]
[color=Olive]{[/color][*]
[color=Green]background:[/color]
[color=#008b]#f9f9f9[/color][color=Gray];[/color][*]
[color=Green]border:[/color]
[color=Maroon]1[/color][color=Red]px[/color]
[color=Red]solid[/color]
[color=#008b]#aaaaaa[/color][color=Gray];[/color][*]
[color=Green]font-size:[/color]
[color=Maroon].9[/color][color=Red]em[/color][color=Gray];[/color][*]
[color=Green]color:[/color]
[color=#008b]#666[/color][color=Gray];[/color][*]
[color=Green]font-family:[/color][color=Gray] Arial, Helvetica, [/color][color=Red]sans-serif[/color][color=Gray];[/color][*]
[color=Green]width:[/color]
[color=Red]auto[/color][color=Gray];[/color][*]
[color=Green]margin:[/color]
[color=Maroon]1[/color][color=Red]px[/color]
[color=Maroon]2[/color][color=Red]px[/color]
[color=Maroon]2[/color][color=Red]px[/color]
[color=Maroon]0[/color][color=Red]px[/color][color=Gray];[/color][*]
[color=Green]padding:[/color]
[color=Maroon]0[/color][color=Red]px[/color]
[color=Maroon]1[/color][color=Red]px[/color]
[color=Maroon]0[/color][color=Red]px[/color]
[color=Maroon]1[/color][color=Red]px[/color][color=Gray];[/color][*]
[color=Olive]}[/color][*]
[*]
[color=Blue].quicktags[/color]
[color=Blue]input[/color][color=Navy]:hover[/color]
[color=Olive]{[/color][*]
[color=Green]border:[/color]
[color=Maroon]1[/color][color=Red]px[/color]
[color=Red]solid[/color]
[color=#008b]#cc0033[/color][color=Gray];[/color][*]
[color=Olive]}[/color][*][color=Gray]/[/color][color=Blue]*******[/color]
[color=Blue]End[/color]
[color=Blue]Quicktags[/color]
[color=Blue]*******[/color][color=Gray]/[/color][/list]
[b]3.[/b] 将下面的代码添加到模板中[b]header.php[/b]文件的[b]<head>…</head>[/b]区域内：
[list=1][*][color=Gray]<[/color][color=Blue]script[/color]
[color=Blue]type[/color][color=Gray]=[/color][color=#8b00]"[/color][color=Red]text/javascript[/color][color=#8b00]"[/color]
[color=Blue]src[/color][color=Gray]=[/color][color=#8b00]"[/color][color=Red]/.../.../quicktags.js[/color][color=#8b00]"[/color][color=Gray]></[/color][color=Blue]script[/color][color=Gray]>[/color][/list]
注意：你需要将src后的地址改为你存放 quicktags.js 文件的路径。
[b]4.[/b] 在主题的[b]comments.php[/b]文件中找到以下代码（评论框）：
[list=1][*][color=Gray]<[/color][color=Blue]p[/color][color=Gray]><[/color][color=Blue]textarea[/color]
[color=Blue]name[/color][color=Gray]=[/color][color=#8b00]"[/color][color=Red]comment[/color][color=#8b00]"[/color]
[color=Blue]id[/color][color=Gray]=[/color][color=#8b00]"[/color][color=Red]comment[/color][color=#8b00]"[/color]
[color=Blue]cols[/color][color=Gray]=[/color][color=#8b00]"[/color][color=Red]100%[/color][color=#8b00]"[/color]
[color=Blue]rows[/color][color=Gray]=[/color][color=#8b00]"[/color][color=Red]10[/color][color=#8b00]"[/color]
[color=Blue]tabindex[/color][color=Gray]=[/color][color=#8b00]"[/color][color=Red]4[/color][color=#8b00]"[/color][color=Gray]></[/color][color=Blue]textarea[/color][color=Gray]></[/color][color=Blue]p[/color][color=Gray]>[/color][/list]
将其修改为：
[list=1][*][color=Gray]<[/color][color=Blue]p[/color][color=Gray]><[/color][color=Blue]div[/color]
[color=Green]class[/color][color=Gray]=[/color][color=#8b00]"[/color][color=Red]quicktags[/color][color=#8b00]"[/color][color=Gray]><[/color][color=Blue]script[/color]
[color=Blue]type[/color][color=Gray]=[/color][color=#8b00]"[/color][color=Red]text/javascript[/color][color=#8b00]"[/color][color=Gray]>[/color][color=Blue]displayQuicktags[/color][color=Olive]([/color][color=#8b00]'[/color][color=Red]comment[/color][color=#8b00]'[/color][color=Olive])[/color][color=Gray];</[/color][color=Blue]script[/color][color=Gray]></[/color][color=Blue]div[/color][color=Gray]>[/color][*][color=Gray]<[/color][color=Blue]textarea[/color]
[color=Blue]name[/color][color=Gray]=[/color][color=#8b00]"[/color][color=Red]comment[/color][color=#8b00]"[/color]
[color=Blue]id[/color][color=Gray]=[/color][color=#8b00]"[/color][color=Red]comment[/color][color=#8b00]"[/color]
[color=Blue]cols[/color][color=Gray]=[/color][color=#8b00]"[/color][color=Red]100%[/color][color=#8b00]"[/color]
[color=Blue]rows[/color][color=Gray]=[/color][color=#8b00]"[/color][color=Red]10[/color][color=#8b00]"[/color]
[color=Blue]tabindex[/color][color=Gray]=[/color][color=#8b00]"[/color][color=Red]4[/color][color=#8b00]"[/color][color=Gray]></[/color][color=Blue]textarea[/color][color=Gray]></[/color][color=Blue]p[/color][color=Gray]>[/color][/list]
OK了，看看文章下的评论框上方是不是多了几个可爱的按钮？以后就不用为需要手动输入代码标签而烦恼了！你还可以在 quicktags.js 中添加其它的标签来丰富你的编辑器。 貌似有老外写的插件，你可以去搜索下。 学习了. 不错，顶一个 很少有人评论的时候用到这些代码 [quote]原帖由 [i]dingood.com[/i] 于 2008-11-11 19:26 发表 [url=http://wordpress.org.cn/redirect.php?goto=findpost&pid=141825&ptid=24011][img]http://wordpress.org.cn/images/common/back.gif[/img][/url]
很少有人评论的时候用到这些代码 [/quote]
插件就是有选择性 收下了 学习 学习了，呵呵，不想让别人乱留评论 顶一个 [quote]原帖由 [i]ehiuan[/i] 于 2008-11-11 19:28 发表 [url=http://wordpress.org.cn/redirect.php?goto=findpost&pid=141832&ptid=24011][img]http://wordpress.org.cn/images/common/back.gif[/img][/url]
插件就是有选择性 [/quote]
请看清楚，这个不是插件
页:
[1]