weburls
Jul092011

给Typecho评论加个编辑器

Category：分享 | Tags：Typecho, 技巧, 折腾, 功能, 评论框, 编辑器 | Author：飞天舞 | Posts： 90

以前为了方便自己的回复，在评论区加了个编辑器，采用的是 功能：评论区增加编辑器这个文中的方法，当时这个quicktags.js有8kb，在看到了qiqiboy的这个文字编辑器 后，很漂亮。试过加上，但没成功。前段时间再次折腾后，成功加到了自己的博客上了，这个js只有4kb，比之前的小多了。所以，我也就换上了这个美观的文字编辑器，详细折腾步骤请查看全文了解。另外，求解：

<font color="#31aff0">文字颜色</font>   //这段无效，求帮助！！
编辑器效果如下：editor.jpg

下面代码存为editor.js（晕，贴代码要出错，直接另存为吧）
http://weburls.net/usr/uploads/2011/10/editor.rar


在foot.php引入这个js，当然你得提前加载jquery

<?php if ($this->is('post')): ?>
<script type="text/javascript" src="/usr/themes/One/js/editor.js">
<?php endif; ?>
<?php if ($this->is('page')): ?>
<script type="text/javascript" src="/usr/themes/One/js/editor.js">
<?php endif; ?>

在css里加上工具条

#toolBar{height:25px;line-height:28px;padding:0 0 0 10px;overflow:hidden;width:95%;}
#smelislist{width:145px;display:none;position:absolute;margin:25px -2px;padding:5px;left:10px;background:#F5F5F5;opacity:0.8;z-index:1000;}
#toolBar #smelislist a{float:left;width:24px;height:24px;text-align:center;background:none;margin:0;text-indent:0;}
.smiley{width:24px;height:24px;}
#toolBar #smelislist a.close{background:url(/images/close.png) no-repeat;height:30px;position:absolute;text-indent:-999px;width:30px;height:30px;right:-7px;bottom:-7px;}
#toolBar a{text-indent:-999px;background:url(/images/feed.gif) no-repeat;float:left;height:20px;line-height:20px;margin:2px 5px 0 0;overflow:hidden;text-indent:-9999px;width:20px;}
#toolBar a.smelis{background-position:0 -755px;}
#toolBar a.fontcolor{background-position:0 -775px;}
#toolBar a.fontsize{background-position:0 -810px;}
#toolBar a.strong{background-position:0 -619px;}
#toolBar a.em{background-position:0 -710px;}
#toolBar a.del{background-position:0 -725px;}
#toolBar a.underline{background-position:0 -474px;}
#toolBar a.ahref{background-position:0 -658px;}
#toolBar a.imgadd{background-position:0 -637px;}
#toolBar a.mp3add{background-position:0 -433px;}
#toolBar a.code{background-position:0 -677px;}
#toolBar a.bquote{background-position:0 -694px;}
#toolBar a.clearFormat{background-position:0 -793px;}
#toolBar a.undo{background-position:0 -865px;}
#toolBar a.redo{background-position:0 -885px;}
#toolBar a.checknum{background-position:0 -825px;float:right;}
#toolBar a.resetarea{background-position:0 -846px;float:right;}
  1. 1
  2. 2
  3. 3
57

57 个流言蜚语 (制造者:30 个流言, 博主:27 次澄清)散布流言

  1. 散漫
    散漫 2011年07月10日
    沙发 回复

    这个小东西真好。。不错啊。

    1. 飞天舞
      飞天舞 (博主) 2011年07月10日
      第1沙 回复

      回复留言方便一点，刚才是后台没有设置好可用的html

  2. 散漫
    散漫 2011年07月10日
    板凳 回复

    加粗无效。。。

    1. 飞天舞
      飞天舞 (博主) 2011年07月10日
      第1凳 回复

      我试过，应该可以的吧？ :arrow:

  3. 飞天舞
    飞天舞 (博主) 2011年07月10日
    地毯 回复


    测试图片

    1. 飞天舞
      飞天舞 (博主) 2011年07月10日
      第1毯 回复

      测试字体大小

      1. 人妖
        人妖 2011年07月21日
        第2毯 回复 
        <?php echo "fnckyou"?>
        测试代码高亮

        1. 飞天舞
          飞天舞 (博主) 2011年07月21日
          第3毯 回复

          Fuck-You-To…略过一万字

  4. 不烦恼
    不烦恼 2011年07月10日
    门口 回复

    没有颜色？

    1. 飞天舞
      飞天舞 (博主) 2011年07月10日
      第1门 回复

      颜色就是无效，挺奇怪的。
      后台以管理员发出来，又能显示，囧...

      1. 不烦恼
        不烦恼 2011年07月10日
        第2门 回复

        把编辑器先撤了，手动敲加色代码，看是否正确处理，如果正确就是编加器的原因

        1. 飞天舞
          飞天舞 (博主) 2011年07月10日
          第3门 回复

          问题还是存在，输入

          <font color="#31aff0">文字颜色</font>

          输出的却是
          <font>文字颜色</font>

          代码被吃掉了？找不到原因。 :arrow:

          1. 阿飞
            阿飞 2011年07月13日
            第4门 回复

            被过滤掉了

  5. 浩子
    浩子 2011年07月11日
    走廊 回复

    呵呵
    我也好就加上看看

    1. 飞天舞
      飞天舞 (博主) 2011年07月11日
      第1廊 回复

      加上了吗？？这个

  6. su
    su 2011年07月12日
    楼梯 回复

    呵呵你这个主题很不错啊

    1. 飞天舞
      飞天舞 (博主) 2011年07月12日
      第1梯 回复

      谢谢，欢迎常来看看 icon_biggrin

  7. 阿飞
    阿飞 2011年07月13日
    宅院 回复

    测试你的颜色

  8. 阿飞
    阿飞 2011年07月13日
    小区 回复

    颜色出来么？

    1. 飞天舞
      飞天舞 (博主) 2011年07月13日
      第1区 回复

      没有出来，据willin大师说：

      removeXSS() 在 var/Typecho/Common.php 第 770 行,
      果然在 795 行找到了 style, 它被列入過濾的字串.
      795 行拿掉 style 後再提交評論, 恢復正常.

      這是怕有人用 style 標簽注入 script 的攻擊代碼.
      看你要不要刪了~ 我是認為 style 是可以刪.
      wp 就沒防這 style.

      1. 阿飞
        阿飞 2011年07月13日
        第2区 回复

        yle="color:#996600;">咋了？

  9. 软件街小秘
    软件街小秘 2011年07月14日
    街道 回复

    TYPECHO 小巧精悍啊 icon_biggrin

    1. 飞天舞
      飞天舞 (博主) 2011年07月14日
      第1街 回复

      呵呵，是啊，我已经用惯了Typecho了，想要的功能都有了。 icon_lol

  10. 翎峋
    翎峋 2011年07月27日
    第10号大院 回复
    当然你得提前加载jquery

    难道还需要这个大家伙？
    typecho的style中间会被加一个，看着的确很不爽。

    1. 飞天舞
      飞天舞 (博主) 2011年07月27日
      第1间 回复

      还是需要那个家伙的。
      只有那一个用不了，讲究吧 icon_confused

  11. 翎峋
    翎峋 2011年07月27日
    第11号大院 回复

    （冏是间隔符）也会被吃掉？

    1. 飞天舞
      飞天舞 (博主) 2011年07月27日
      第1间 回复

      吃掉了。。。

      1. 翎峋
        翎峋 2011年07月27日
        第2间 回复

        被吃掉了！

  12. lauyoume
    lauyoume 2011年07月29日
    第12号大院 回复

    东西不错~~~

    1. 飞天舞
      飞天舞 (博主) 2011年07月29日
      第1间 回复

      弄起玩玩，呵呵

  13. 他和她
    他和她 2011年10月02日
    第13号大院 回复

    我按照你的步骤做 怎么加上去图标看不见 点击也没效果

    1. 飞天舞
      飞天舞 (博主) 2011年10月02日
      第1间 回复

      我现在在外出差，不清楚是怎么回事。或许我少写了步骤？

  14. 他和她
    他和她 2011年10月02日
    第14号大院 回复

    快点回来 讲解下哈

    1. 飞天舞
      飞天舞 (博主) 2011年10月02日
      第1间 回复

      这个…我估计还得一周才回得去吧。你看看qiqiboy的那篇文章吧先…

  15. 枫叶红秋雨
    枫叶红秋雨 2011年10月06日
    第15号大院 回复

    这个楼层显示还是不错！

    1. 飞天舞
      飞天舞 (博主) 2011年10月07日
      第1间 回复

      呵呵…那是

  16. 无冷
    无冷 2011年10月20日
    第16号大院 回复

    偶有时间也加一个

    1. 飞天舞
      飞天舞 (博主) 2011年10月20日
      第1间 回复

      有个编辑器评论的时候多少要方便一些

  17. 视野瞳前
    视野瞳前 2011年10月24日
    第17号大院 回复

    个人觉得 有表情就可以了，，图片视乎都有些多余，，很少有人评论发图片。。。

    1. 飞天舞
      飞天舞 (博主) 2011年10月24日
      第1间 回复

      各取所需吧，有时还是用得着。

      1. 视野瞳前
        视野瞳前 2011年10月24日
        第2间 回复

        是的，。呵呵

  18. 河河
    河河 2011年11月05日
    第18号大院 回复

    Typecho的速度果然很快

    1. 飞天舞
      飞天舞 (博主) 2011年11月06日
      第1间 回复

      是不错，自从用上它就很喜欢了，欢迎你也转过来，呵呵。

  19. seri
    seri 2011年11月08日
    第19号大院 回复

    字的颜色的话，用color 是会有问题,你不如直接style

    1. 飞天舞
      飞天舞 (博主) 2011年11月08日
      第1间 回复

      typecho注释了这东西，换style也不行。
      改源码倒是能实现，但以后升级不方便了。加上用的时候比较少，就放弃了。

  20. 视野瞳前
    视野瞳前 2011年11月20日
    第20号大院 回复

    越来越强大了。。。。下次模版一定装上

    1. 飞天舞
      飞天舞 (博主) 2011年11月20日
      第1间 回复

      呵呵，有这个回复时方便一点

      1. 视野瞳前
        视野瞳前 2011年11月20日
        第2间 回复

        比较喜欢，记录昵称网址，比较喜欢

        1. 飞天舞
          飞天舞 (博主) 2011年11月20日
          第3间 回复

          呵呵，这个在http://www.binjoo.net/2010/11/typecho-author-info-show-hide
          多逛逛，会有收获的。

  21. 暮春
    暮春 2011年12月12日
    第21号大院 回复

    不知道把这个编辑器放到后台怎么样，很小巧啊

    1. 飞天舞
      飞天舞 (博主) 2011年12月12日
      第1间 回复

      后台，这个我不知道了啊，放前台都有人说没必要的。

  22. Crazy
    Crazy 2月3日
    第22号大院 回复

    好吧，试试mp3看看....
    mp3

  23. 飞天舞
    飞天舞 (博主) 2月11日
    第23号大院 回复

    命大

  24. lauyoume
    lauyoume 2月13日
    第24号大院 回复

    icon_1 icon_1 我喜欢你这个表情，求分享...9@whyyou.me

  25. lauyoume
    lauyoume 2月13日
    第25号大院 回复

    lauyoume
    是这套表情哦。

    1. 飞天舞
      飞天舞 (博主) 2月13日
      第1间 回复

      @lauyoume
      直接，另存为吧，呵呵。

增加一个流言 »

随便走走

一起路过

未曾错过

    童鞋，您来自火星？这里无法寻找您的足迹！

灌水大军


Powered By Typecho))) | Theme By simpleJun Base | 文章 RSS and 评论 RSS | 粤ICP备10208985号 | 空间赞助 By 散漫