改造超级强大的可视化评论编辑器！

该日志由 jiee @ 22:45:54 发布,Tag: blogbus模板 博客大巴模板 评论框 可视化

前段时间Digidea向我问起如何在bus下实现评论框的bbCode功能，当时我是找了一段js代码给他，后来他在博客里也公布了旧模板下bbCode的实现方法。后来也ئارامگاھ也留言向我询问过如何在新模板系统下实现这个功能，我当时因为工作上的原因，没有时间来解决，也不想弄那个功能。

最近无意中看到介绍nicEditor的文章，所以就去http://nicedit.com/ 下载了源码，回来看了下，突然想到可以把它用到blogbus上来。于是便有了今天这篇日志。下面我们先来看下nicEditor在blogbus下的实现效果：


可视化评论编辑器

评论列表的富文本显示

 下面就来讲下实现方法：

 Detail代码块：

 

 

在detail代码块的开头，加上下面的代码：

 

好了，去看下你的日志页吧，试着用评论编辑器发表一篇日志看看吧！如果你暂时只想体验这个评论编辑器的话，请到这里来看下：http://false.blogbus.com/logs/22100343.html 

实际上，如果你只是把上面的代码加到detail中的话，看到的效果并不理想，你还需要对css作出相应的调整。而css的调整得根据你所使用的模板进行调整，所以这里就不讲了。

分类于：模板技巧 您可以: 阅读全文 () | 评论 (34) | 引用 (1)

评论

  • [avatar:46]比较无奈是，一点入日志页面后，光标就会自动定位到评论框。。。

    jiee 回复 姬明雪 说：
    呵呵，这个东西本身用在这里就有点问题的……呵呵
    (2008-09-02 13:38:53)

    姬明雪 (http://neverossa.blogbus.com) 发表于 2008-08-26 23:32:41  [回复]

  • [avatar:41]那该怎么办啊？？？急········

    jiee 回复 C.zn 说：
    去掉一些js代码吧，你那页面太臃肿了……
    (2008-08-19 20:36:56)

    C.zn (http://dream1996.blogbus.com) 发表于 2008-08-18 19:23:36  [回复]

  • [avatar:41]每个评论都有问题。
    顺便问问，如何实现日志在新窗口中打开？

    jiee 回复 C.zn 说：
    主要是因为你用的js代码太多，导致js事件冲突，我试了下，第一次可以看到richText的工具栏，第二次就没能看到了

    新窗口打开的话，需要在index-posts中加以设置，主要代码就是：

    <a href="{#url}" taget=_blank>{#title}</a>
    (2008-08-18 17:57:02)

    C.zn (http://dream1996.blogbus.com) 发表于 2008-08-18 16:26:22  [回复]

  • [avatar:41]我的插件出现严重问题，SoS！！！那个插件简直无效·······

    jiee 回复 C.zn 说：
    恩，你总得把出问题的页面给我看下吧，
    你这样说明问题我是没法帮你解决的啊
    (2008-08-18 12:10:35)

    C.zn (http://dream1996.blogbus.com) 发表于 2008-08-17 21:43:48  [回复]

  • [avatar:40]受教了，多謝。

    jiee 回复 姬明雪 说：
    也谢谢你的关注
    (2008-07-17 23:08:16)

    姬明雪 (http://neverossa.blogbus.com/) 发表于 2008-07-16 23:41:23  [回复]

  • [avatar:44]为什么你的博客没有搜索？

    jiee 回复 VinCent P@rk 说：
    因为我不知道放哪好……
    (2008-07-15 22:36:11)

    VinCent P@rk (http://imoney.blogbus.com/) 发表于 2008-07-15 22:05:20  [回复]

  • [avatar:45]超级强大，谢谢分享...

    jiee 回复 eA7Y 说：
    也谢谢你对万恶的关注
    (2008-07-11 22:57:35)

    eA7Y (http://ieasy.blogbus.com) 发表于 2008-07-11 10:36:43  [回复]

  • [avatar:48]嗯...可以了..十分感谢的...^^

    那如果我想把ie左下角的“完成”那该成自己的文字...(......有没有这样的功能的??)
    要怎样写啊..

    因为我(貌似)见过这种功能的
    也见到了类似教“加入滚动文字”的代码
    但是我尝试之后并没有结果..

    jiee 回复 木紫 说：
    那个是用js实现的，有点麻烦，这里就不讲了……
    (2008-07-01 13:52:27)

    木紫 (http://muziwanli.blogbus.com) 发表于 2008-07-01 11:54:09  [回复]

  • [avatar:40]我进去的时候出现了这个错误Javascript <false.blogbus.com> 9
    提交评论的时候是Javascript <false.blogbus.com> 10
    我用的浏览器是opera9.5

    jiee 回复 lioz 说：
    不好意思，这个弹出的是评论数目，我忘了取消掉了
    (2008-07-01 09:11:33)

    lioz (http://ilioz.cn) 发表于 2008-07-01 08:37:14  [回复]

  • [avatar:48]阿..我一直有登陆的
    怎么突然没了...
    现在这个是了...

    jiee 回复 木紫 说：
    图片下加链接那个，你可以用这样的代码：

    <div style="text-align: center">
    <a href="网址">链接文字</a>
    </div>

    在index和detail 中，加到#header 下面，
    (2008-07-01 09:24:35)

    木紫 (http://muziwanli.blogbus.com) 发表于 2008-06-30 13:35:19  [回复]

  • [avatar:40]

    看到之前的评论了 可是现在好像好像不能评论了

    jiee 回复 阿问 说：
    可能是最近bus的服务器的问题……你检查下blog设置，看是不是设置成“不允许评论了”
    (2008-06-30 12:46:50)

    阿问 (http://muyezi.blogbus.com/) 发表于 2008-06-29 23:35:29  [回复]

  • [avatar:40] 我现在找到我之前说的那个自定义模块了 可是现在好像出了错

    评论没了 按你说的教程 我现在的部分文章显示不了了

    谁来救救我

    阿问 (http://muyezi.blogbus.com/) 发表于 2008-06-29 23:31:40  [回复]

  • [avatar:40]

    我很想好好打扮下我的大巴 可是我不会 你们说的代码 我都不懂 找了很久都找不到

    例如css 还有 js 还有index和detail 我都找不到在哪

    我想自定义评论 还有想评论时插入表情 还有我也想换皮肤 还有我还想把 就是博客的顶部换上自己喜欢的图片

    希望 大人 可以耐心指教下

    jiee 回复 阿问 说：
    呵呵，先慢慢熟悉下bus的模板结构，然后到“万恶”来找找资料，那时你就会这些了……
    (2008-06-30 12:48:40)

    阿问 (http://muyezi.blogbus.com/) 发表于 2008-06-29 22:42:13  [回复]

  • [avatar:48]嗯..这样链接就在页面的最顶端了..
    想把它放在图片下面的话要怎么改?

    还有...很谢谢你一直的帮助哦..

    jiee 回复 木紫 说：
    我不知道你的博客网址……
    (2008-06-30 12:49:28)

    木紫 () 发表于 2008-06-29 22:08:24  [回复]

  • [avatar:49]呀..我弄了个补丁..
    现在标题，正文，和评论都分开拉

    开心...
    是你的功劳....

    木紫 (http://muziwanli.blogbus.com) 发表于 2008-06-28 21:48:33  [回复]

  • [avatar:49]呃..因为后来我把tag放到标题下面了..
    本来tag是在文章下面的..
    然后正文和标题就会贴在一起
    就像现在我的评论和作者名称,发布时间贴在一起一样

    不过算啦
    现在也不是很要紧...

    我想在首页置顶图片的下方弄个"links" 和 "about me" 的标签呢..
    请问要怎么写啊...

    jiee 回复 木紫 说：
    恩，这个说起来可能有点复杂，
    链接的代码是这样的， <a href="网址">链接说明文字</a>

    你可以在#header这个层之后加上一个层，像下面这样的代码：

    <div style="text-align: center">
    <a href="网址">链接说明文字</a>
    </div>
    (2008-06-28 22:33:14)

    木紫 (http://muziwanli.blogbus.com) 发表于 2008-06-28 21:41:10  [回复]

  • [avatar:49]是不算重在一起..是紧贴在一起了..
    一般来说标题和正文不都有一定的距离的么...

    jiee 回复 木紫 说：
    我看了下，标题和正文也并不是紧贴啊……
    不然的话，你调整下tag的下间距吧

    在css中加入 .tags {margin-bottom: 20px;}
    (2008-06-28 13:16:21)

    木紫 (http://muziwanli.blogbus.com) 发表于 2008-06-28 11:57:40  [回复]

  • [avatar:49]哭泣..我自己做的模板呀
    可能中途不知道哪里出错了
    阿...那能不能解决呀?

    jiee 回复 木紫 说：
    我看了下，你原来是说“日记正文和标题重在一起..”，但我没看到这个现象啊（ie6&7）
    (2008-06-28 09:17:38)

    木紫 (http://muziwanli.blogbus.com) 发表于 2008-06-28 01:10:25  [回复]

  • [avatar:43]怎么去 "您将收到博主的回复邮件"

    jiee 回复 010 说：
    .emailnotice {display: none;}

    加到css的最后就可以了
    (2008-06-28 09:20:26)

    010 () 发表于 2008-06-27 22:48:53  [回复]

  • [avatar:40]大师！
    如何去掉随机文章啊。

    jiee 回复 阿恩 说：
    Blog设置（后台上面靠右那里）中有这么一项
    允许随机文章 是 否

    下一步应该知道怎么办了吧
    (2008-06-28 09:21:57)

    阿恩 () 发表于 2008-06-27 16:13:41  [回复]

  • [avatar:49]没有啊..
    因为这个问题我就用了另一个模板
    那我现在用这个你帮我看下呀...

    jiee 回复 木紫 说：
    不知道你从哪弄的模板，好像是模板本身的问题吧
    (2008-06-27 16:16:10)

    木紫 (http://muziwanli.blogbus.com) 发表于 2008-06-27 13:44:40  [回复]

  • [avatar:49]大人..有问题...
    日记正文和标题重在一起..
    还有正文和评论也是...
    怎么办啊???
    我找了好久都不知道怎么调...

    jiee 回复 木紫 说：
    现在好了？
    我在ie下看，是正常显示的……
    (2008-06-27 08:05:15)

    木紫 (http://muziwanli.blogbus.com) 发表于 2008-06-26 22:03:17  [回复]

  • [avatar:48]顺便解决哦

    今后多在QQ群里跟组里给你站宣传～～～

    樱桃小肉丸子 () 发表于 2008-06-26 15:42:09  [回复]

  • [avatar:48]有严重问题！！

    问题1：

    在第一个回复插長图片的话。
    接下来的回复全都挤在第一次回复图片下面！
    截图：http://hiphotos.baidu.com/%C4%FB%C3%CApao%B9%FB%CC%C7/pic/item/5534948724334b3fc75cc325.jpg

    问题2：
    回复栏出现错乱原码………解决呢？
    截图：http://hiphotos.baidu.com/%C4%FB%C3%CApao%B9%FB%CC%C7/pic/item/8a1a4911698c08d3a6ef3f25.jpg


    请求小万解决～～～

    jiee 回复 樱桃小肉丸子 说：
    有严重问题！！用baidu空间外链图片，别人是看不到的……
    (2008-06-27 08:04:11)

    樱桃小肉丸子 () 发表于 2008-06-26 15:38:15  [回复]

  • 用了这个后表情好像不能插入评论了阿？

    jiee 回复 jedal 说：
    近期会想办法解决的
    (2008-06-27 08:03:00)

    jedal (http://waiwaiboy.blogbus.com) 发表于 2008-06-26 15:09:04  [回复]

  • [avatar:41]寒。。。我说解决表情用能用悠嘻猴的～～

    呵呵站长不知道哈

    jiee 回复 BABY 说：
    “那表情最后能有嘻哈猴的 哈哈” 你这种话，除了你自己明白之外，我觉得别人不可能明白的……

    另，最近会想办法让编辑器支持表情的^_^
    (2008-06-27 07:57:58)

    BABY () 发表于 2008-06-26 14:38:24  [回复]

  • [avatar:42]太棒了！！
    问个问题
    怎么把博客下面的 Copyright © 2002-2008 BlogBus.com, All Rights Reserved. 博客大巴 版权所有 一排字换成自己想要的？ 不是去处掉是换成自己想写的字在最下边。谢谢了！

    jiee 回复 quietay 说：
    在index和detail中搜索{#copyright}，
    直接替换{#copyright}就可以了
    (2008-06-26 09:18:36)

    quietay (http://quietay.blogbus.com) 发表于 2008-06-25 23:58:03  [回复]

  • [avatar:40]这个技术不错啊。谢谢

    jiee 回复 时代博客 说：
    不用谢……
    (2008-06-26 09:17:46)

    时代博客 (http://shidai.blogbus.com) 发表于 2008-06-25 19:32:00  [回复]

  • [avatar:40]很强大

    豆子 (http://pealog.blogbus.com) 发表于 2008-06-25 18:13:37  [回复]

  • [avatar:40]很好, 很强大...
    其实我一直都想, 可以在别人的评论后面, 有一个 "引用" 按钮, 点一下就把这个评论以 [quote] 的形式放到评论框里了.
    但是 blogbus 这个弱智代码貌似很麻烦...

    jiee 回复 Digidea 说：
    其实也不是太麻烦……
    (2008-06-26 09:16:47)

    Digidea (http://digidea.blogbus.com) 发表于 2008-06-25 13:22:07  [回复]

  • 评论分页：共2页 1 2 下一页 最后一页

发表评论

姓名：
E-mail：
地址：
 
 
表情(不再使用)：