春天即将到来
Jul092011

给Typecho评论加个编辑器

以前为了方便自己的回复,在评论区加了个编辑器,采用的是 <font color=#5F9EA0>功能:评论区增加编辑器</font>这个文中的方法,当时这个quicktags.js有8kb,在看到了<font color=#5F9EA0>qiqiboy的这个文字编辑器</font> 后,很漂亮。试过加上,但没成功。前段时间再次折腾后,成功加到了自己的博客上了,这个js只有4kb,比之前的小多了。所以,我也就换上了这个美观的文字编辑器,详细折腾步骤请查看全文了解。另外,求解:<font color="#31aff0">文字颜色</font> //这段无效,求帮助!!

编辑器效果如下:editor.jpg

下面代码存为editor.js(晕,贴代码要出错,直接另存为吧)
<font color=#5F9EA0>http://hiall.life/usr/uploads/2011/10/editor.rar<;/font>

在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;}

下载这个工具条所需的图片(以前就是被图片给误导了,囧)

<font color=#5F9EA0>http://hiall.life/usr/themes/One/images/feed.gif<;/font>

在comments.php的评论框上加入这个工具条

  <div id="toolBar" class="hidden"> 
  <a class="smelis" title="更多表情" href="javascript:setStyleDisplay('smelislist','block');"></a> 
  <div id="smelislist" style="display: none;"><a href="javascript:addSmelie(':?:')" title=":?:"><img src="/usr/plugins/Smilies/img/icon_question.gif" alt=":?:" class="smiley" /></a> 
  <a href="javascript:addSmelie(':razz:')" title=":razz:"><img src="/usr/plugins/Smilies/img/icon_razz.gif" alt=":razz:" class="smiley" /></a> 
  <a href="javascript:addSmelie(':sad:')" title=":sad:"><img src="/usr/plugins/Smilies/img/icon_sad.gif" alt=":sad:" class="smiley" /></a> 
  <a href="javascript:addSmelie(':!:')" title=":!:"><img src="/usr/plugins/Smilies/img/icon_exclaim.gif" alt=":!:" class="smiley" /></a> 
  <a href="javascript:addSmelie(':oops:')" title=":oops:"><img src="/usr/plugins/Smilies/img/icon_redface.gif" alt=":oops:" class="smiley" /></a> 
  <a href="javascript:addSmelie(':grin:')" title=":grin:"><img src="/usr/plugins/Smilies/img/icon_biggrin.gif" alt=":grin:" class="smiley" /></a> 
  <a href="javascript:addSmelie(':eek:')" title=":eek:"><img src="/usr/plugins/Smilies/img/icon_surprised.gif" alt=":eek:" class="smiley" /></a> 
  <a href="javascript:addSmelie(':shock:')" title=":shock:"><img src="/usr/plugins/Smilies/img/icon_eek.gif" alt=":shock:" class="smiley" /></a> 
  <a href="javascript:addSmelie(':???:')" title=":???:"><img src="/usr/plugins/Smilies/img/icon_confused.gif" alt=":???:" class="smiley" /></a> 
  <a href="javascript:addSmelie(':cool:')" title=":cool:"><img src="/usr/plugins/Smilies/img/icon_cool.gif" alt=":cool:" class="smiley" /></a> 
  <a href="javascript:addSmelie(':lol:')" title=":lol:"><img src="/usr/plugins/Smilies/img/icon_lol.gif" alt=":lol:" class="smiley" /></a> 
  <a href="javascript:addSmelie(':mad:')" title=":mad:"><img src="/usr/plugins/Smilies/img/icon_mad.gif" alt=":mad:" class="smiley" /></a> 
  <a href="javascript:addSmelie(':twisted:')" title=":twisted:"><img src="/usr/plugins/Smilies/img/icon_twisted.gif" alt=":twisted:" class="smiley" /></a> 
  <a href="javascript:addSmelie(':roll:')" title=":roll:"><img src="/usr/plugins/Smilies/img/icon_rolleyes.gif" alt=":roll:" class="smiley" /></a> 
  <a href="javascript:addSmelie(':wink:')" title=":wink:"><img src="/usr/plugins/Smilies/img/icon_wink.gif" alt=":wink:" class="smiley" /></a> 
  <a href="javascript:addSmelie(':idea:')" title=":idea:"><img src="/usr/plugins/Smilies/img/icon_idea.gif" alt=":idea:" class="smiley" /></a> 
  <a href="javascript:addSmelie(':arrow:')" title=":arrow:"><img src="/usr/plugins/Smilies/img/icon_arrow.gif" alt=":arrow:" class="smiley" /></a> 
  <a href="javascript:addSmelie(':neutral:')" title=":neutral:"><img src="/usr/plugins/Smilies/img/icon_neutral.gif" alt=":neutral:" class="smiley" /></a> 
  <a href="javascript:addSmelie(':cry:')" title=":cry:"><img src="/usr/plugins/Smilies/img/icon_cry.gif" alt=":cry:" class="smiley" /></a> 
  <a href="javascript:addSmelie(':mrgreen:')" title=":mrgreen:"><img src="/usr/plugins/Smilies/img/icon_mrgreen.gif" alt=":mrgreen:" class="smiley" /></a> 
  <a href="javascript:addSmelie(':smile:')" title=":smile:"><img src="/usr/plugins/Smilies/img/icon_smile.gif" alt=":smile:" class="smiley" /></a> 
  <a href="javascript:addSmelie(':evil:')" title=":evil:"><img src="/usr/plugins/Smilies/img/icon_evil.gif" alt=":evil:" class="smiley" /></a> 
  <a class="close" title="隐藏表情" href="javascript:setStyleDisplay('smelislist','none');"></a> 
  <a class="fontcolor" title="字体颜色" href="javascript: Editor.fontColor();">fontcolor</a> 
  <a class="fontsize" title="字体大小" href="javascript: Editor.fontSize();">fontsize</a> 
  <a class="strong" title="粗体" href="javascript: Editor.strong();">STRONG</a> 
  <a class="em" title="斜体" href="javascript: Editor.em();">EM</a> 
  <a class="del" title="删除线" href="javascript: Editor.del();">DEL</a> 
  <a class="underline" title="下划线" href="javascript: Editor.underline();">U</a> 
  <a class="ahref" title="超链接" href="javascript: Editor.ahref();">ahrefa</a> 
  <a class="imgadd" title="插入图片" href="javascript: Editor.img();">img</a> 
  <a class="code" title="插入代码" href="javascript: Editor.code();">code</a> 
  <a class="bquote" title="插入引用" href="javascript: Editor.blockquote();">blockquote</a>  
  <a class="clearFormat" title="去除格式" href="javascript: Editor.clear();">CLEAR</a> 
  <a class="undo" title="上一行" href="javascript: Editor.undo();">UNDO</a> 
  <a class="redo" title="下一行" href="javascript: Editor.redo();">REDO</a> 
  <a class="resetarea" title="清空输入" href="javascript: Editor.empty();">Empty Input</a> 
  <a class="checknum" title="字数统计" href="javascript: Editor.countWords();">Count Words</a>  

<h4>需要willin大师的評論表情及貼圖插件支持,传送门-》表情插件</h4>
补充一下,后台-设置-评论-允许使用的HTML标签和属性的框里面需要填写以下内容

<a href="">
<img src="">
<img>
<blockquote>
<code>
<strong>
<em>
<ins>
<del>
<font color="">
<font size="">

目前,两个功能没有成功,我很迷糊,求指教:
1、字体颜色无效。
2、插入图片也无效。已折腾好了。

71 个流言蜚语 (制造者:35 个流言, 博主:33 次澄清, Pingback:3 Responses)散布流言

  1. 散漫
    散漫 2011年07月10日   [Google Chrome 12.0.742.91 @ Windows XP]
    沙发 回复

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

    1. 飞天舞
      飞天舞 (博主) 2011年07月10日   [Google Chrome 12.0.742.9 @ Windows XP]
      第1沙 回复

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

  2. 散漫
    散漫 2011年07月10日   [Google Chrome 12.0.742.91 @ Windows XP]
    板凳 回复

    加粗无效。。。

    1. 飞天舞
      飞天舞 (博主) 2011年07月10日   [Google Chrome 12.0.742.9 @ Windows XP]
      第1凳 回复

      我试过,应该可以的吧? :arrow:

  3. 飞天舞
    飞天舞 (博主) 2011年07月10日   [Google Chrome 12.0.742.9 @ Windows XP]
    地毯 回复


    测试图片

    1. 飞天舞
      飞天舞 (博主) 2011年07月10日   [Google Chrome 12.0.742.9 @ Windows XP]
      第1毯 回复

      <font size="4">测试字体大小</font>

      1. 人妖
        人妖 2011年07月21日   [Google Chrome 12.0.742.122 @ Windows 7]
        第2毯 回复

        <?php echo "hello"?>测试代码高亮

        1. 飞天舞
          飞天舞 (博主) 2011年07月21日   [其它浏览器 @ 这货是火星来的]
          第3毯 回复

          …略过一万字

  4. 不烦恼
    不烦恼 2011年07月10日   [Mozilla FireFox 5.0 @ Windows 7]
    门口 回复

    <font>没有颜色?</font>

    1. 飞天舞
      飞天舞 (博主) 2011年07月10日   [Google Chrome 12.0.742.9 @ Windows XP]
      第1门 回复

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

      1. 不烦恼
        不烦恼 2011年07月10日   [Mozilla FireFox 5.0 @ Windows 7]
        第2门 回复

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

        1. 飞天舞
          飞天舞 (博主) 2011年07月10日   [Google Chrome 12.0.742.9 @ Windows XP]
          第3门 回复

          问题还是存在,输入<font color="#31aff0">文字颜色</font>
          输出的却是<font>文字颜色</font>
          代码被吃掉了?找不到原因。 :arrow:

          1. 阿飞
            阿飞 2011年07月13日   [Internet Explorer 7.0 @ Windows 7]
            第4门 回复

            <font>被过滤掉了</font>

  5. 浩子
    浩子 2011年07月11日   [Mozilla FireFox 5.0 @ Windows 7]
    走廊 回复

    呵呵
    我也好就加上看看

    1. 飞天舞
      飞天舞 (博主) 2011年07月11日   [Google Chrome 12.0.742.9 @ Windows XP]
      第1廊 回复

      加上了吗??这个

  6. su
    su 2011年07月12日   [Mozilla FireFox 5.0 @ Windows XP]
    楼梯 回复

    呵呵你这个主题很不错啊

    1. 飞天舞
      飞天舞 (博主) 2011年07月12日   [Google Chrome 12.0.742.9 @ Windows XP]
      第1梯 回复

      谢谢,欢迎常来看看 :grin:

  7. 阿飞
    阿飞 2011年07月13日   [Internet Explorer 7.0 @ Windows 7]
    宅院 回复

    <font>测试你的颜色</font>

  8. 阿飞
    阿飞 2011年07月13日   [Internet Explorer 7.0 @ Windows 7]
    小区 回复

    <font> 颜色出来么? </font>

    1. 飞天舞
      飞天舞 (博主) 2011年07月13日   [Google Chrome 12.0.742.9 @ Windows XP]
      第1区 回复

      没有出来,据willin大师说:

      removeXSS() 在 var/Typecho/Common.php 第 770 行, 果然在 795 行找到了 style, 它被列入過濾的字串. 795 行拿掉 style 後再提交評論, 恢復正常. 這是怕有人用 style 標簽注入 script 的攻擊代碼. 看你要不要刪了~ 我是認為 style 是可以刪. wp 就沒防這 style.
      1. 阿飞
        阿飞 2011年07月13日   [Internet Explorer 7.0 @ Windows 7]
        第2区 回复

        <span st<x>yle="color:#996600;">咋了?</span>

  9. 软件街小秘
    软件街小秘 2011年07月14日   [Google Chrome 13.0.782.32 @ Windows 7]
    街道 回复

    TYPECHO 小巧精悍啊 :grin:

    1. 飞天舞
      飞天舞 (博主) 2011年07月14日   [Google Chrome 12.0.742.9 @ Windows XP]
      第1街 回复

      呵呵,是啊,我已经用惯了Typecho了,想要的功能都有了。 :lol:

  10. 翎峋
    翎峋 2011年07月27日   [Internet Explorer 4.01 @ Windows]
    10号大院 回复
    当然你得提前加载jquery
    难道还需要这个大家伙? typecho的st<x>yle中间会被加一个,看着的确很不爽。
    1. 飞天舞
      飞天舞 (博主) 2011年07月27日   [Google Chrome 14.0.825.0 @ Windows XP]
      第1间 回复

      还是需要那个家伙的。
      只有那一个用不了,讲究吧 :???:

  11. 翎峋
    翎峋 2011年07月27日   [Internet Explorer 4.01 @ Windows]
    11号大院 回复

    (冏是间隔符)也会被吃掉?

    1. 飞天舞
      飞天舞 (博主) 2011年07月27日   [Google Chrome 14.0.825.0 @ Windows XP]
      第1间 回复

      吃掉了。。。

      1. 翎峋
        翎峋 2011年07月27日   [Internet Explorer 4.01 @ Windows]
        第2间 回复

        被吃掉了!

  12. lauyoume
    lauyoume 2011年07月29日   [Google Chrome 8.0.552.237 @ Windows 7]
    12号大院 回复

    东西不错~~~

    1. 飞天舞
      飞天舞 (博主) 2011年07月29日   [Google Chrome 14.0.825.0 @ Windows XP]
      第1间 回复

      弄起玩玩,呵呵

  13. 他和她
    他和她 2011年10月02日   [Internet Explorer 7.0 @ Windows XP]
    13号大院 回复

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

    1. 飞天舞
      飞天舞 (博主) 2011年10月02日   [其它浏览器 @ 这货是火星来的]
      第1间 回复

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

  14. 他和她
    他和她 2011年10月02日   [Internet Explorer 7.0 @ Windows XP]
    14号大院 回复

    快点回来 讲解下哈

    1. 飞天舞
      飞天舞 (博主) 2011年10月02日   [其它浏览器 @ 这货是火星来的]
      第1间 回复

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

  15. 枫叶红秋雨
    枫叶红秋雨 2011年10月06日   [Mozilla FireFox 7.0.1 @ Mac OS X]
    15号大院 回复

    这个楼层显示还是不错!

    1. 飞天舞
      飞天舞 (博主) 2011年10月07日   [其它浏览器 @ 这货是火星来的]
      第1间 回复

      呵呵…那是

  16. 牧风
    牧风 2011年10月20日   [Google Chrome 13.0.782.220 @ Windows XP]
    16号大院 回复

    偶有时间也加一个

    1. 飞天舞
      飞天舞 (博主) 2011年10月20日   [其它浏览器 @ 这货是火星来的]
      第1间 回复

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

  17. 第四个李智
    第四个李智 2011年10月24日   [Google Chrome 14.0.835.202 @ Windows 7]
    17号大院 回复

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

    1. 飞天舞
      飞天舞 (博主) 2011年10月24日   [Google Chrome 14.0.825.0 @ Windows XP]
      第1间 回复

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

      1. 第四个李智
        第四个李智 2011年10月24日   [Google Chrome 14.0.835.202 @ Windows 7]
        第2间 回复

        是的,。呵呵

  18. 河河
    河河 2011年11月05日   [Google Chrome 6.0.472.33 @ Windows 7]
    18号大院 回复

    Typecho的速度果然很快

    1. 飞天舞
      飞天舞 (博主) 2011年11月06日   [Google Chrome 14.0.825.0 @ Windows XP]
      第1间 回复

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

  19. seri
    seri 2011年11月08日   [Internet Explorer 9.0 @ Windows 7]
    19号大院 回复

    字的颜色的话,用color 是会有问题,你不如直接st<x>yle

    1. 飞天舞
      飞天舞 (博主) 2011年11月08日   [Google Chrome 14.0.825.0 @ Windows XP]
      第1间 回复

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

  20. 第四个李智
    第四个李智 2011年11月20日   [Google Chrome 15.0.874.106 @ Windows 7]
    20号大院 回复

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

    1. 飞天舞
      飞天舞 (博主) 2011年11月20日   [Google Chrome 14.0.825.0 @ Windows XP]
      第1间 回复

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

      1. 第四个李智
        第四个李智 2011年11月20日   [其它浏览器 @ 这货是火星来的]
        第2间 回复

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

        1. 飞天舞
          飞天舞 (博主) 2011年11月20日   [Google Chrome 14.0.825.0 @ Windows XP]
          第3间 回复

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

  21. 暮春
    暮春 2011年12月12日   [Internet Explorer 9.0 @ Windows 7]
    21号大院 回复

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

    1. 飞天舞
      飞天舞 (博主) 2011年12月12日   [Google Chrome 14.0.825.0 @ Windows XP]
      第1间 回复

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

  22. Crazy
    Crazy 2012年02月03日   [Google Chrome 16.0.912.77 @ Windows 7]
    22号大院 回复

    好吧,试试mp3看看....
    mp3

    1. 飞天舞
      飞天舞 (博主) 2012年02月03日   [Google Chrome 14.0.825.0 @ Windows XP]
      第1间 回复
  23. 飞天舞
    飞天舞 (博主) 2012年02月11日   [Google Chrome 14.0.825.0 @ Windows XP]
    23号大院 回复

    命大

  24. lauyoume
    lauyoume 2012年02月13日   [Google Chrome 16.0.912.63 @ Windows 7]
    24号大院 回复

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

  25. lauyoume
    lauyoume 2012年02月13日   [Google Chrome 16.0.912.63 @ Windows 7]
    25号大院 回复

    lauyoume
    是这套表情哦。

    1. 飞天舞
      飞天舞 (博主) 2012年02月13日   [Google Chrome 14.0.825.0 @ Windows XP]
      第1间 回复

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

  26. 测试哦
    测试哦 2012年04月01日   [Google Chrome 17.0.963.83 @ Windows 7]
    26号大院 回复

    <bquote>哈哈哈</bquote>
    $(function(){

  27. viko16
    viko16 2012年07月28日   [Maxthon 3.4.2.1000 @ Windows 7]
    27号大院 回复

    额,貌似willin大师的传送门进不去哦.... icon_28

    1. 飞天舞
      飞天舞 (博主) 2012年07月28日   [UCWeb 8.11112510 @ 这货是火星来的]
      第1间 回复

      确实打不开,已经很久了,百度吧,应该有别的地方有下载的。

  28. 伟鹏
    伟鹏 2012年08月05日   [Google Chrome 21.0.1180.60 @ Windows XP]
    28号大院 回复

    亲,评论处编辑器这还是过滤不要,看见报错信息吧,我刚换typecho,找编辑器呢

    1. 飞天舞
      飞天舞 (博主) 2012年08月06日   [UCWeb 8.11112510 @ 这货是火星来的]
      第1间 回复

      亲,我也不想这样啊。可是代码不指定语言的话,就是会报错啊。

  29. ooxx
    ooxx 2012年10月10日   [Google Chrome 20.0.1132.57 @ Windows 7]
    29号大院 回复

    我试试啊 icon_1

    1. 飞天舞
      飞天舞 (博主) 2012年10月11日   [Google Chrome 12.0.742.9 @ Windows XP]
      第1间 回复

      屁屁不错啊~~

  30. 飞天舞
    飞天舞 (博主) 2013年03月21日   [Google Chrome 12.0.742.9 @ Windows XP]
    30号大院 回复

    测试

    性感背带舞

    <?php while($top->next()): ?>
    

    <bquote>谢谢,欢迎常来看看 :grin:</bquote>

  31. 飞天舞
    飞天舞 (博主) 2013年03月21日   [Google Chrome 12.0.742.9 @ Windows XP]
    31号大院 回复

    测试代码

    <?php if(BufannaoCmsTheme_Plugin::topShow()->to($top)->have()): ; ?>
    
  32. 我是小白
    我是小白 2015年11月14日   [Google Chrome 31.0.1650.63 @ Windows 7]
    32号大院 回复

    <span style="color:#31aff0;">怎么在自带上面加这些呢?</span>

    1. 飞天舞
      飞天舞 (博主) 2015年12月09日   [Google Chrome 12.0.742.9 @ Windows XP]
      第1间 回复

      按上面的方法就能实现。

增加一个流言 »

未曾错过

    • 秋天: 舞哥,谢谢你...
    • sha: 终于可以访问了啊。
    • 阿飞: 你终于又回来了
    • 952: 舞哥好久没更新了呀
    • 阿信: 一种倔强,是...
    • mai: 打呼噜据说是太累了
    • 孙华: 新年快乐!
    • 孙华: 已经回家了,...
    • rai: 这首歌特别叼
    • 浩子: 最近比较烦躁...