打造评论和发帖的利器：BBcode For Opera

opera首先，推荐一款Firefox的重度用户都很熟悉的扩展：BBCode。它可以让你通过右键菜单方便的添加BBCode/HTML/XHTML等格式代码，如粗体、斜体、插入图像、链接、文字颜色等等，可以说为喜欢逛论坛或者在Blog中经常发言的朋友提供强有力的辅助。

在Opera中也可以实现大多数的功能，虽然有些功能还做不到，但根据自己的习惯选择工具栏或者菜单位置、调整菜单层次、增加和减少条目，甚至能做到更加方便。

BBcode For Opera

最开始在Opera中使用BBcode的应该是俄罗斯定制版，Lex1自己编写了js，并制作成了UBB工具栏。之后ezibo的白菜版先集成了这个功能，并完善了图标。philade的教程：《一步一步，制作自己的BBCode工具栏》更是帮助很多人能够自己添加。这个功能很受欢迎，现在大多数配置版都集成了这个功能。

另外，在极速体验版中bbcode是右键形式的，不过实现原理不同，优点是不需要js支持，缺点是要占用剪贴板。

不过op的玩家大多数是喜欢逛论坛的，一般论坛使用的ubb功能写得很详细，而html的有点简陋（philade的同学在帖子上说要继续增加，很久没动静了）。而且每个人习惯不同，So，根据FF的bbcode和那篇教程，并结合自己的习惯进行改造。

主要的修改

  1. 采用右键菜单模式，基于bbcode.js方式
  2. 绝大多数图标调用Opera10自带的邮件编辑器图标，这样就算不修改皮肤影响也不大。
  3. 添加了适用于wordpress的xhtml
  4. 精简了文字颜色部分，只写了几个常用的
  5. 顺序和其他细节调整

Opera的BBcode菜单

实现步骤

照着下面的步骤来，灰常简单。

1.添加BBcode菜单

编辑operaconfig菜单配置文件，在最后面添加：

 [BBcode Menu]
 Submenu, "文字颜色", UBB Color menu="Show hidden popup menu, , , , "Mail Compose Text Color""
 Submenu, "文字大小", UBB Size menu="Show hidden popup menu, , , , "Mail Compose Increase Size""
 ---------------------------0
 Item, "粗体[b]"="Go to page, "javascript:ujs_bbcode_tag('[b]')", , , "Mail Compose Bold""
 Item, "斜体[i]"="Go to page, "javascript:ujs_bbcode_tag('[i]')", , , "Mail Compose Italic""
 Item, "下划线[u]"="Go to page, "javascript:ujs_bbcode_tag('[u]')", , , "Mail Compose Underline""
 -------------------------1
 Item, "引用[quote]"="Go to page, "javascript:ujs_bbcode_tag('[quote]')", , , "Account IRC""
 Item, "代码[code]"="Go to page, "javascript:ujs_bbcode_tag('[code]')", , , "Mail Compose HTML""
 Item, "图片[img]"="Go to page, "javascript:ujs_bbcode_tag('[img]')", , , "Mail Compose Images""
 Item, "链接[url]"="Go to page, "javascript:ujs_bbcode_tag('[url]')", , , "Mail Compose Link""
 ---------------------------2
 Item, "有序列表"="Go to page, "javascript:ujs_bbcode_tag('[list=1][*]','[/list]')", , , "Mail Compose Numbered List""
 Item, "无序列表"="Go to page, "javascript:ujs_bbcode_tag('[list][*]','[/list]')", , , "Mail Compose Bullet List""

 [xhtml Menu]
 Submenu, "段落", Xhtml Paragraph menu="Show hidden popup menu, , , , "Mail Compose Left to right""
 Submenu, "文字颜色", xhtml Color menu="Show hidden popup menu, , , , "Mail Compose Text Color""
 Submenu, "文字大小", xhtml Size menu="Show hidden popup menu, , , , "Mail Compose Increase Size""
 ---------------------------0
 Item, "粗体"="Go to page, "javascript:ujs_bbcode_tag('<strong>')", , , "Mail Compose Bold""
 Item, "斜体"="Go to page, "javascript:ujs_bbcode_tag('<em>')", , , "Mail Compose Italic""
 Item, "下划线"="Go to page, "javascript:ujs_bbcode_tag('<ins>')", , , "Mail Compose Underline""
 Item, "删除线"="Go to page, "javascript:ujs_bbcode_tag('<del>')", , , "Mail Compose Strikethrough""
 -------------------------1
 Item, "图片"="Go to page, "javascript:ujs_bbcode_tag('<img src=\x22','\x22 alt=\x22','\x22/>')", , "图片", "Mail Compose Images""
 Item, "链接"="Go to page, "javascript:void(inivar='%c')", "<a href>", "链接", "Mail Compose Link" & Go to page, "javascript:var url='';try{if(inivar.search(/^[a-z]{3,5}:\/\/|^opera:[a-z/]/i) != -1){url=inivar};inivar=null}catch(e){url=''};ujs_bbcode_tag('<a href=\x22'+url+'\x22>')""
 Item, "引用"="Go to page, "javascript:ujs_bbcode_tag('<blockquote>')", ,, "Account IRC""
 Item, "Pre"="Go to page, "javascript:ujs_bbcode_tag('<pre>')", , , "Chat Room""
 Item, "代码"="Go to page, "javascript:ujs_bbcode_tag('<code>')", , , "Mail Compose HTML""
 -------------------------2
 Item, "有序列表"="Go to page, "javascript:ujs_bbcode_tag('<ol><li>','</li></ol>')", , , "Mail Compose Numbered List""
 Item, "无序列表"="Go to page, "javascript:ujs_bbcode_tag('<ul><li>','</li></ul>')", , , "Mail Compose Bullet List""

 [UBB Color menu]
 Item,"黑色#000000"="Go to page, "javascript:ujs_bbcode_tag('[color=#000000]')",,, "bb_a_#000000""
 Item,"灰色#555555"="Go to page, "javascript:ujs_bbcode_tag('[color=#555555]')",,, "bb_a_#555555""
 Item,"浅灰#999999"="Go to page, "javascript:ujs_bbcode_tag('[color=#999999]')",,, "bb_a_#999999""
 Item,"白色#ffffff"="Go to page, "javascript:ujs_bbcode_tag('[color=#ffffff]')",,, "bb_a_#ffffff""
 Item,"红色#ff0000"="Go to page, "javascript:ujs_bbcode_tag('[color=#ff0000]')",,, "bb_a_#ff0000""
 Item,"橙色#ff6600"="Go to page, "javascript:ujs_bbcode_tag('[color=#ff6600]')",,, "bb_a_#ff6600""
 Item,"黄色#ffff33"="Go to page, "javascript:ujs_bbcode_tag('[color=#ffff33]')",,, "bb_a_#ffff33""
 BreakItem
 Item,"绿色#008000"="Go to page, "javascript:ujs_bbcode_tag('[color=#008000]')",,, "bb_a_#008000""
 Item,"浅绿#33ff33"="Go to page, "javascript:ujs_bbcode_tag('[color=#33ff33]')",,, "bb_a_#33ff33""
 Item,"蓝色#0000ff"="Go to page, "javascript:ujs_bbcode_tag('[color=#0000ff]')",,, "bb_a_#0000ff""
 Item,"浅蓝#3366ff"="Go to page, "javascript:ujs_bbcode_tag('[color=#3366ff]')",,, "bb_a_#3366ff""
 Item,"紫色#6600cc"="Go to page, "javascript:ujs_bbcode_tag('[color=#6600cc]')",,, "bb_a_#6600cc""
 Item,"浅紫#9999ff"="Go to page, "javascript:ujs_bbcode_tag('[color=#9999ff]')",,, "bb_a_#9999ff""
 Item,"粉色#ff00ff"="Go to page, "javascript:ujs_bbcode_tag('[color=#ff00ff]')",,, "bb_a_#ff00ff""

 [xhtml Color menu]
 Item,"黑色#000000"="Go to page, "javascript:ujs_bbcode_tag('<span style=\x22color: #000000\x22>')",,, "bb_a_#000000""
 Item,"灰色#555555"="Go to page, "javascript:ujs_bbcode_tag('<span style=\x22color: #555555\x22>')",,, "bb_a_#555555""
 Item,"浅灰#999999"="Go to page, "javascript:ujs_bbcode_tag('<span style=\x22color: #999999\x22>')",,, "bb_a_#999999""
 Item,"白色#ffffff"="Go to page, "javascript:ujs_bbcode_tag('<span style=\x22color: #ffffff\x22>')",,, "bb_a_#ffffff""
 Item,"红色#ff0000"="Go to page, "javascript:ujs_bbcode_tag('<span style=\x22color: #ff0000\x22>')",,, "bb_a_#ff0000""
 Item,"橙色#ff6600"="Go to page, "javascript:ujs_bbcode_tag('<span style=\x22color: #ff6600\x22>')",,, "bb_a_#ff6600""
 Item,"黄色#ffff33"="Go to page, "javascript:ujs_bbcode_tag('<span style=\x22color: #ffff33\x22>')",,, "bb_a_#ffff33""
 BreakItem
 Item,"绿色#008000"="Go to page, "javascript:ujs_bbcode_tag('<span style=\x22color: #008000\x22>')",,, "bb_a_#008000""
 Item,"浅绿#33ff33"="Go to page, "javascript:ujs_bbcode_tag('<span style=\x22color: #33ff33\x22>')",,, "bb_a_#33ff33""
 Item,"蓝色#0000ff"="Go to page, "javascript:ujs_bbcode_tag('<span style=\x22color: #0000ff\x22>')",,, "bb_a_#0000ff""
 Item,"浅蓝#3366ff"="Go to page, "javascript:ujs_bbcode_tag('<span style=\x22color: #3366ff\x22>')",,, "bb_a_#3366ff""
 Item,"紫色#6600cc"="Go to page, "javascript:ujs_bbcode_tag('<span style=\x22color: #6600cc\x22>')",,, "bb_a_#6600cc""
 Item,"浅紫#9999ff"="Go to page, "javascript:ujs_bbcode_tag('<span style=\x22color: #9999ff\x22>')",,, "bb_a_#9999ff""
 Item,"粉色#ff00ff"="Go to page, "javascript:ujs_bbcode_tag('<span style=\x22color: #ff00ff\x22>')",,, "bb_a_#ff00ff""

 [UBB Size menu]
 Item, "+1"="Go to page, "javascript:ujs_bbcode_tag('[size=1]')",,, "Mail Compose Increase Size""
 Item, "+2"="Go to page, "javascript:ujs_bbcode_tag('[size=2]')",,, "Mail Compose Increase Size""
 Item, "+3"="Go to page, "javascript:ujs_bbcode_tag('[size=3]')",,, "Mail Compose Increase Size""
 Item, "+4"="Go to page, "javascript:ujs_bbcode_tag('[size=4]')",,, "Mail Compose Increase Size""
 Item, "+5"="Go to page, "javascript:ujs_bbcode_tag('[size=5]')",,, "Mail Compose Increase Size""
 Item, "+6"="Go to page, "javascript:ujs_bbcode_tag('[size=6]')",,, "Mail Compose Increase Size""
 Item, "+7"="Go to page, "javascript:ujs_bbcode_tag('[size=7]')",,, "Mail Compose Increase Size""

 [xhtml Size menu]
 Item, "11px"="Go to page, "javascript:ujs_bbcode_tag('<span style=\x22font-size: 11px\x22>')",,, "Mail Compose Increase Size""
 Item, "12px"="Go to page, "javascript:ujs_bbcode_tag('<span style=\x22font-size: 12px\x22>')",,, "Mail Compose Increase Size""
 Item, "13px"="Go to page, "javascript:ujs_bbcode_tag('<span style=\x22font-size: 13px\x22>')",,, "Mail Compose Increase Size""
 Item, "14px"="Go to page, "javascript:ujs_bbcode_tag('<span style=\x22font-size: 14px\x22>')",,, "Mail Compose Increase Size""
 Item, "15px"="Go to page, "javascript:ujs_bbcode_tag('<span style=\x22font-size: 15px\x22>')",,, "Mail Compose Increase Size""
 Item, "16px"="Go to page, "javascript:ujs_bbcode_tag('<span style=\x22font-size: 16px\x22>')",,, "Mail Compose Increase Size""
 Item, "17px"="Go to page, "javascript:ujs_bbcode_tag('<span style=\x22font-size: 17px\x22>')",,, "Mail Compose Increase Size""
 Item, "18px"="Go to page, "javascript:ujs_bbcode_tag('<span style=\x22font-size: 18px\x22>')",,, "Mail Compose Increase Size""

 [xhtml Paragraph menu]
 Item, "<h1>"="Go to page, "javascript:ujs_bbcode_tag('<h1>','</h1>')",,, "bb_h1""
 Item, "<h2>"="Go to page, "javascript:ujs_bbcode_tag('<h2>','</h2>')",,, "bb_h2""
 Item, "<h3>"="Go to page, "javascript:ujs_bbcode_tag('<h3>','</h3>')",,, "bb_h3""
 Item, "<h4>"="Go to page, "javascript:ujs_bbcode_tag('<h4>','</h4>')",,, "bb_h4""
 Item, "<h5>"="Go to page, "javascript:ujs_bbcode_tag('<h5>','</h5>')",,, "bb_h5""
 Item, "<h6>"="Go to page, "javascript:ujs_bbcode_tag('<h6>','</h6>')",,, "bb_h6""
2.修改文本框右键菜单

同样，编辑菜单配置文件，搜索[Edit Widget Popup Menu]，在它的下面一行添加：

Submenu, "BBcode",BBcode Menu="Show hidden popup menu,,,,"bbcode""
Submenu, "Xhtmlcode",xhtml Menu="Show hidden popup menu,,,,"Compose mail""
3.添加UserJS

下载这个js：bbcode，解压后放到你的js目录下。

4.补充图标（非必须）

下载这个图标包，把解压后的bbcode文件夹放到opera/skin里的standard_skin.zip里面。
并编辑standard_skin.zip里的skin.ini，在最后面添加：

bbcode=bbcode/bbcode.png
bb_a_#000000=bbcode/bb_a_#000000.gif
bb_a_#555555=bbcode/bb_a_#555555.gif
bb_a_#999999=bbcode/bb_a_#999999.gif
bb_a_#ffffff=bbcode/bb_a_#ffffff.gif
bb_a_#ff0000=bbcode/bb_a_#ff0000.gif
bb_a_#ff6600=bbcode/bb_a_#ff6600.gif
bb_a_#ffff33=bbcode/bb_a_#ffff33.gif
bb_a_#008000=bbcode/bb_a_#008000.gif
bb_a_#33ff33=bbcode/bb_a_#33ff33.gif
bb_a_#0000ff=bbcode/bb_a_#0000ff.gif
bb_a_#3366ff=bbcode/bb_a_#3366ff.gif
bb_a_#6600cc=bbcode/bb_a_#6600cc.gif
bb_a_#9999ff=bbcode/bb_a_#9999ff.gif
bb_a_#ff00ff=bbcode/bb_a_#ff00ff.gif

当然，你也可以修改正在使用的皮肤。

注意事项

  1. 请保存为UTF-8格式，否则会乱码。
  2. 在保存menu 、toolbar、skin之前，要先关闭Opera。

适用范围

基本上跟FF的扩展一样

  1. Bbcode适用于绝大多数论坛的评论输入框（无需进入高级回复）、高级回复下的纯文本模式，根据论坛设置和权限的不同，可能有部分bbcode无效
  2. Xhtmlcode在wp等Blog的评论输入框：通常可以使用粗体、斜体、链接、图片、引用等功能，如果对方安装了评论增强的插件则可以支持更多，当然，有的地方完全不支持。在自己的博客并处于登录状态，可以评论中使用全部Xhtml，无论前台还是后台。
  3. Xhtmlcode在Wp的文章编辑器，纯文本模式下全部可用
  4. 需要开启Userjs

Ps：

1.其实我写文章就是用wp自带编辑器加上这个，当然，还有更多的条目，不过那些适用范围很小，基本上适合我自己。

2.如果你更喜欢工具栏的模式，那么请看《一步一步，制作自己的BBCode工具栏》。

3.根据自己的使用习惯，修改菜单，去掉不需要的，再把一些动作组合起来会非常方便。

4.稍后还会继续改进。

» 转载请以超链接形式注明来源：A.shun Blog » 《打造评论和发帖的利器：BBcode For Opera》
» 本文链接地址：http://www.a-shun.com/archives/21324.html

» 本文采用 BY-NC-SA 协议进行授权。
» 建议通过 Rss( Google Reader | Feedburner | Feedsky )方式及时获取更新。
  1. 口袋志 口袋志 2009/12/31 10:46

    我咔嚓一声，踩一脚，然后溜掉

    Google Chrome 4.0.267.0 Google Chrome 4.0.267.0 Windows XP Windows XP
    #41
    @
  2. mytion mytion 2009/12/31 12:15

    好强大啊！看来我不是ff的重度用户。

    Firefox 3.5.6 Firefox 3.5.6 Windows XP Windows XP
    #42
    @
  3. 老七 老七 2009/12/31 17:02

    无视代码 送上祝福。。。

    Internet Explorer 7.0 Internet Explorer 7.0 Windows XP Windows XP
    #43
    @
  4. 蜘蛛抱蛋 蜘蛛抱蛋 2009/12/31 19:08

    完了，乱码了。。。谁给我个修改好的或者原版啊！我把备份丢了。。。

    Opera 10.10 Opera 10.10 Windows 7 Windows 7
    #44
    @
    • shun shun 2009/12/31 19:55

      @蜘蛛抱蛋, 注意保存为UTF-8无BOM格式就不会乱码了。
      记得备份，如果想要欢原到原版的，只需要删除那个菜单配置文件，op会调用默认的

      Opera 10.10 Opera 10.10 Windows XP Windows XP
      Reply
    • 蜘蛛抱蛋 蜘蛛抱蛋 2009/12/31 23:03

      @shun,
      我是保存为utf-8,是不是不能用记事本编辑？

      Opera 10.10 Opera 10.10 Windows 7 Windows 7
      Reply
    • shun shun 2009/12/31 23:12

      @蜘蛛抱蛋, 可以用记事本，不过一般出于方便上，不用这个。
      建议你用Notepad++，有代码折叠和高亮

      Opera 10.10 Opera 10.10 Windows XP Windows XP
      Reply
  5. fblue fblue 2009/12/31 20:28

    网费用光了，蹭网来看 :!:
    我是不喜欢敲代码，这个用着确实方便不少..回到自己电脑上我去试试。
    还有新年快乐啊，可惜我的元旦假期泡汤了….

    Google Chrome 4.0.267.0 Google Chrome 4.0.267.0 Windows 7 Windows 7
    #45
    @
  6. 仁心博客 仁心博客 2009/12/31 20:43

    祝愿新年快乐

    Internet Explorer 8.0 Internet Explorer 8.0 Windows XP Windows XP
    #46
    @
  7. mfkof mfkof 2010/01/03 00:21

    很实用的功能喔~
    就是有点看糊涂了，一看到代码就晕~~

    Opera 10.00 Opera 10.00 Windows 7 Windows 7
    #47
    @
  8. bolo bolo 2010/01/03 11:56

    没用过

    Firefox 3.5.6 Firefox 3.5.6 Windows 7 Windows 7
    #48
    @
  9. 吖Bee 吖Bee 2010/01/10 16:45

    在学校用Opera~~真爽

    Firefox 3.5.7 Firefox 3.5.7 Windows XP Windows XP
    #49
    @
  10. 天毅 天毅 2010/01/11 11:08

    opera的粉丝来支持一个！我原来用的fast版的，现在用的鹤舞九天。准备自己定制一下。

    Opera 10.10 Opera 10.10 Windows XP Windows XP
    #50
    @
    • A.shun A.shun 2010/01/11 14:20

      @天毅, 恩，支持自己定制的。那些版本虽然强大，但不可能完全符合我们的习惯 :smile:

      Opera 10.10 Opera 10.10 Windows XP Windows XP
      Reply
  11. 天毅 天毅 2010/01/12 09:26

    A.Shun的关于opera的技巧有不少啊，我准备汇总一下。自己不敢写关于opera的文章，怕写不出他的好反而误事，嘿嘿。

    Opera 10.10 Opera 10.10 Windows XP Windows XP
    #51
    @
    • A.shun A.shun 2010/01/12 12:09

      @天毅, 我op只能说用得顺手，跟论坛上的高手比起来还差得远呢～一般写的也只是自己能用上别人能看懂的～ :lol:

      Opera 10.56 Opera 10.56 Windows XP Windows XP
      Reply
  12. 海天 海天 2010/07/04 00:08

    opera现在也有那么强大的工具了啊~

    Google Chrome 6.0.447.0 Google Chrome 6.0.447.0 Windows XP Windows XP
    #52
    @
    • A.shun A.shun 2010/07/04 00:10

      @海天 这个不是工具，纯配置文件写出来的。
      opera一直这么强，只是低调而已。

      Opera 10.60 Opera 10.60 Windows XP Windows XP
      Reply
  13. m m 2010/08/31 01:46

    [h1]test[backcolor=LimeGreen][/backcolor][/h1]

    Opera 10.10 Opera 10.10 Windows XP Windows XP
    #53
    @
    • A.shun A.shun 2010/08/31 09:02

      @m 这个主要是在论坛用的。

      wp支持的是html，而且还屏蔽了很多

      Opera 10.70 Opera 10.70 Windows XP Windows XP
      Reply
Leave a Reply

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

Trackbacks and Pingbacks: