为博客评论框添加格式化功能按钮

对于wordpress 的评论框,我一直有个小小的遗憾,那就是评论的时候想插入一个链接,想加粗一段字体,想斜体一段文字,都很麻烦,需要手工加UBB代码。今天在网上闲逛的时候,在philna的博客上看到他的留言框上面就带了这些功能按钮,于是心中窃喜,或者说是盗窃之喜,这下有门路了。

于是下载下他的philna主题,换上主题,查看了一下源文件发现评论的输入框之前,作者引用了一个js文件:



进一步打开philna主题下的js目录,找到edit_button.js文件,直接将该文件上传到inove主题的js目录下,然后在comments.php的评论框前加入引用edit_button.js的代码,评论框的html代码如下:


这样基本就大功告成了,不过按钮样式比较丑陋,edit_button.js中生成的按钮样式为ed_button,这要对这个样式在style.css中定义一下就可以了,到网上随便搜索几个样式好了,我的样式如下(样式网上找的):

BORDER-RIGHT: #2C59AA 1px solid;
PADDING-RIGHT: 2px;
BORDER-TOP: #2C59AA 1px solid;
PADDING-LEFT: 2px;
FONT-SIZE: 12px;
FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5);
BORDER-LEFT: #2C59AA 1px solid;
CURSOR: hand; COLOR: black;
PADDING-TOP: 2px;
BORDER-BOTTOM: #2C59AA 1px solid

哈哈,以后兄弟们留言可以把内容留的丰富一点了,很少写这一类涉及到代码的文章,白天上班敲代码,下班再盘弄代码就有点头疼了,不过这个小功能确实惹人喜爱,于是就废话了几句,把它写下来了。

小雪转中雪

11 Comments On 为博客评论框添加格式化功能按钮

  1. avatar

    其实 基本上 我留言是不会用ubb代码或则html标签,暂时还没养成那样的习惯!!!

  2. avatar

    @shamas
    我用ie6测了一把,也没有什么问题呀。
    @平平
    你的好像是bo-blob的哦,压根不是wordpress,哈哈。
    @林晨
    你说的是不是把留言框变成一个多功能文本编辑器的插件,那个插件似乎并怎么好,它会改变留言框的HTML标签,从而造成一些功能不能使用。

  3. avatar

    前几天发现个插件也可以实现,改天发出来一起看看

  4. avatar

    不是一个版本的,纯支持了

  5. avatar

    这个很好啊,其实我以前蛮想要这个功能的,后来还从网上下载过一个JS,结果IE6就出错,最后不了了之了,现在这个试用看看

  6. avatar

    @derek
    改了白色的,果然好了很多,谢谢提醒,哈哈 😀 。

  7. avatar

    改成白色背景应该会好很多吧,学习你的经验了,谢啦

  8. avatar

    @hevin
    我没有搞什么啊,基本上未作任何改动,还得感谢mg12的无私的共享精神。
    @林晨
    加上这些按钮时挺方便的,不过我的按钮样式比较丑,在FF下更丑 😀 。

  9. avatar

    值得借鉴我也来试试

  10. avatar

    这个皮被你整的很不错了哈。

    真想西欧那个你那偷过来。

    测试:代码啥样子?
  11. avatar

    粗体显示测试 斜体显示测试 超链接测试 下划线测试 删除线测试

| 真的AJAX提交哦

回复给 林晨 点击这里取消回复。