用 quicktag 为 wordpress 评论框添加简单的编辑器

一直就想给自己博客的评论框添加一个编辑器，因为经常会在评论中插入一些代码或是链接的，感觉手工输入的会比较麻烦，自己倒也无所谓了，但评论者往往会比较懒得输这些代码！于是到网上 google 了一翻！这方面的东西还真的难找，一直没找到，猛然间发现 望月 那里就有我想要的效果，于是赶紧发问，不过得到的回答却是主题自带的功能！然后就研究了下他的主题，就发现一个强大的 JS 文件。对又是 JS ，自己的 JS 文件是越来越大了，不过确实是个好东西。

这个 JS 就是 quicktag ，功能便是在编辑框中方便地插入 tag ，方便文字的排版。想必对 WP 比较了解的都应该知道它，因为 WP 后台的编辑窗口也用到了这个 JS。之前我也有研究下 WP 后台自带的编辑器，不过就是不知道如何来调用。js-quicktags 现在已经升级到了 1.3.1 版，支持插入的按钮标签达到了 29 个之多。还有很多我都叫不上名字来的标签，功能算是非常的强大！

不多说了，上资料： 官方主页 | JS 下载 | 效果演示

看了演示页面的代码大家应该知道怎么用了，非常的简单。把这个 JS文件下载下来以后，在适当的位置载入，建议只在有评论框的页面载入，首页就没有必要了！

然后在 comments.php 文件中找到自己模版中评论输入框的位置：例如我的就是：

<textarea name="comment" id="comment" tabindex="4" rows="8" cols="50"></textarea>

然后在上面插入代码：

<script type="text/javascript">edToolbar('comment');</script>

其中的参数 edToolbar 是不用改的，是 js 文件中定义的函数；comment 是 textarea 的 ID，一般也不用改。

OK，功能方面的添加就完成了。就会在自己的评论框上看到一排按钮了！如果你还想对它进行一些优化的话那就还得继续。

首先觉得这个默认的按钮太丑了，想个性化一点，那我们可以来修改 CSS，这里要提到一篇文章：为评论框添加简单的编辑器 ，这里也介绍了如何实现我这样的功能，只可惜我后来才看到，不要然就不用研究这么久了，呵呵！这篇文章中介绍的也非常的详细，不过就是那个 quicktag.js 的版本有点旧了，不过如果不需要这么多功能的话也可以参考下。这里想说的是我直接用了sfox 提供的CSS，哈哈，在些表示感谢了。当然也要分享出来：

#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 #cc0033;}

在这里稍微做了点改动，其中的 ID ed_toolbar_comment 是 JS 自动生成的，用 firebug 可以很容易的看到。

然后如果想和我这里的表情图标一样，想在让它显示的时候在显示，平时隐藏的话，就要用 jQuery 来控制了，当然 JS 也可以很方便的做到，这里只提供 jQuery 的，博客中没有载入 jQuery 的建议用 JS 实现！

先让#ed_toolbar_comment 不显示，然后在输入框下面加了一个小图片，就是那个 B 了，因为一直没有找到好一点的图片，就先用这个了，其实不怎么喜欢！然后给它的 ID=”showcode“，然后在 JS 中用下面的代码来控制 #ed_toolbar_comment 的显示和隐藏：

$('#showcode').click(function(){$('#ed_toolbar_comment').slideToggle("slow");return false;});

到这里就算真正完工了，当然那排按钮中的按钮有点太多了，有些真的不会用到。你只需要在 quicktag.js 文件中删除一些字段就 OK 了。如有问题请留言……

Posted in Wordpress Tagged , ,
Share with Del.icio.us Google书签 Digg Live Bookmark Technorati Furl Yahoo书签 Facebook 百度搜藏 新浪ViVi 365Key网摘 天极网摘 和讯网摘 博拉网 POCO网摘 添加到饭否 QQ书签 Digbuzz我挖网

相关文章本月热门点击排行

  • N/A
Post a comment 2008/12/06 – 14:597,350 Views
Post a comment | Trackback URL | RSS Comments 83 Comments
  1. 2008/12/08 at 20:37 | #51
    xiaorszNotify

    @u88 我这发得出啊？！！不知道你遇到什么问题了？？？ :evil:

    噢,你那条留言被拦截了,我已经放出来了!! :grin:

  2. 2008/12/09 at 09:22 | #52
    zEUS.Notify

    确实很好用呢～ :arrow:

  3. 2008/12/09 at 14:32 | #53
    EdenNotify

    你这个貌似没有用上？呵呵，原来是那个B。表情框弹出效果很酷啊。

  4. 2008/12/09 at 22:33 | #54
    LeeiioNotify

    評論還是簡單點好哈，不然我覺得評論列表會異常的混亂。

  5. 2008/12/14 at 00:40 | #55
    开心Notify

    RSZ你的评论表情共享下呗 :razz:

  6. 2008/12/14 at 10:34 | #56
    xiaorszNotify

    @开心 表情我早就共享了的。哈哈，去这里找。换表情了，同时分享六套wordpress评论表情下载

  7. 2008/12/16 at 17:47 | #57
    sherryNotify

    js文件的地址点不开了。。。

  8. 2008/12/16 at 17:54 | #58
    xiaorszNotify

    @sherry 我这能点开啊！！要不你直接去sfox那里下吧！我文章里有他的链接，这个JS简单些，就我现在用这个，太复杂了用不到！其实这个功能也没有多大的用处，呵呵！

  9. 2008/12/18 at 19:55 | #59
    沿阶草Notify

    有学到了一招，哈哈
    没交学费。。。。 :mrgreen:

  10. 2008/12/18 at 20:27 | #60
    沿阶草Notify

    @沿阶草
    我想起来http://www.wmd-editor.com/ 这个插件了 呵呵 很漂亮的

  11. 2008/12/18 at 20:37 | #61
    xiaorszNotify

    @沿阶草 这个我也去试过，这个加载的 JS 还要多些，呵呵！！不过好看些！！

  12. 2008/12/19 at 16:46 | #62
    JinwenNotify

    我也加上了，以前每次加链接也不方便。不过我把它激活改为输入框的focus，也是无聊好玩。

  13. 2008/12/28 at 09:53 | #63
    达米安Notify

    嘿嘿，我加了这个JS后，代码标签貌似没用。来你这实验下！

    #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 #cc0033;}

  14. 2008/12/28 at 09:55 | #64
    达米安Notify

    这个代码标签貌似没什么效果啊，我在我那边试了加和不加代码标签，效果一样！ :???:

  15. 2008/12/28 at 10:19 | #65
    xiaorszNotify

    @达米安 噢，这些标签会被WP自动过滤掉的，就除了几个可以用。管理员的才不会被过滤的，所以这个一般是方便我自己的，呵呵！而且我这里是用的coolcode 来显示代码的。看我的！！

    #ed_toolbar_comment input:hover{
    border: 1px solid #cc0033;}
  16. 2008/12/28 at 10:42 | #66
    达米安Notify

    coolcode标签，那不是又要加个插件！ :?:

  17. 2008/12/28 at 10:50 | #67
    xiaorszNotify

    @达米安 要想高亮代码大家好像都是用的插件哈！！ :razz:

  18. 2009/02/22 at 16:35 | #68
    痞子CNotify

    哈哈
    快成论坛了~~

  19. 2009/03/06 at 17:00 | #69
    lorenNotify

    能不能让这排评论按钮变成中文？？我直接在JS文件里面改了一下，但是显示出来就乱码了

  20. 2009/03/06 at 22:42 | #70
    xiaorszNotify

    @loren 能吧，改了后注意保存格式的时候要改为 utf-8 的，就不会是乱码了！！

  21. 2009/03/08 at 00:09 | #71
    AlexNotify

    这个我就直接加载文件OK了，样式就用默认的。。

  22. 2009/04/06 at 23:57 | #72
    小猫Notify

    不知道除了WP Ajax Edit Comments有没有更好的评论编辑呢…搜索不到。无助

  23. 2009/04/07 at 00:12 | #73
    小猫Notify

    要是我不想要那么多代码的按钮。不知道要怎么修改呢

  24. 2009/04/07 at 10:17 | #74
    xiaorszNotify

    @小猫 好像还有几个吧，我是看见哪个博客的有，再去看是什么插件，呵呵！！现在也不太记得了！！

    那个按钮的代码都在 JS 中的，不想要哪个到JS文件中删除就可以了！！

  25. 2009/05/21 at 20:19 | #75
    阿婆Notify

    学习了，我就是需要这个东西，搜索到你的blog来了。博主也是个折腾专家。

  26. 2009/05/26 at 20:47 | #76
    hiNotify

    testtest

  27. 2009/06/05 at 10:04 | #77
    wowHuiNotify

    很实用，但很少有人用~ 回去搞下玩玩~ 顺便转下~ :cool:

  28. 2009/06/07 at 14:15 | #78
    xiaorszNotify

    @wowHui 这个看自己了，有些人喜欢，有些人不太喜欢的，呵呵！！

  29. 2009/09/01 at 18:21 | #79
    耕堂-wordpress|seoNotify

    博主，你给的下载链接打不开啊，能帮忙发邮箱吗？kuijin414@163.com ，先谢过了

  30. 2009/11/15 at 09:10 | #80
    小溪Notify

    学习一下，呵呵

  31. 2009/12/04 at 05:02 | #81
    koemieNotify

     好想哭啊，我是个超级菜鸟，由于是女生，也没学过计算机，好难，实在看不懂，好难过，我就想评论框像哪个图图一样，可是看了文章介绍，还是不会，我太笨了，能不能帮帮我，我都弄了3天了还没有研究会，，，5555555

  32. 2010/01/14 at 14:39 | #82
    chancatNotify

    占位先

  33. 2010/01/30 at 21:11 | #83
    秦大少Notify

    暂时用不上 点你的广告以示支持

Comment pages 1 2
2 Trackbacks
  1. By PhilNa on 2008/12/06 at 21:18

    修改inove主题…

    Mg12的主题的强大没话说.但是我们总是喜欢对主题做些个性化的修改.我的修改可以说全部是从xiaorsz那里偷来的.哈哈.当然在修改的同时也经过了很多次的调试.有时候出现了冲突.然后又调试.反…

  2. By 玩软部落 » 用 JS Quicktags 为 WordPress 评论添加简单的编辑器 on 2009/06/05 at 10:17

    [...] 最终还是放弃了, 今天在 Xiaorsz 瞎转悠时, 无意间发现了这篇: 用 quicktag 为 wordpress 评论框添加简单的编辑器, 这么详细的教程, 还怕学不会吗… 嘿, [...]

Post a Comment

（必填）

（必填，有回复时方便邮件通知）

（可不填，填了方便回访）

Sharing technology, recording life