使评论框支持UBB代码的脚本及说明

石头兔 发表于 2006-05-11 21:14:45

使评论框支持UBB代码的脚本及说明

其中除了原有的表情图标的支持以外，新增加了UBB代码的支持。目前只添加了粗体、下划线、超链接、图片四中ubb代码的支持。

其实方法很笨，就是一个一个blockquote的搜索，按照正则表达式，找到符合条件的，就替换成对应的html代码，因此，认为这个东西效率一般。不过如果是在歪酷服务器端实现的话，效率会高一些，不过歪酷的服务器的负担也会重一些。

莫非这就是传说中的胖客户端么？

另外为了避免首页大量的代码让一些不熟悉代码的人感到头晕，于是不再放在首页，需要的，请看全文

于2006.5.9 21:56 编辑修正

修正内容：将用于ubb的正则表达式搜索的部分的反向引用中使用的如：、$4等符号重新添上。

由于歪酷系统的奇怪的问题(未知)，无论是添加在模板中的或者是发表在日志中的(留言中的未测试)诸如、等字符串会变的很奇怪。第一次提交之后，显示是正常的，当进行再次编辑的时候，无论是模板还是日志，其中的这些字符串就都会不见了。此时无论是否进行改动，点击提交的话，就会让这些起关键作用的字符串丢失。

因此，在今天修改模板，加入两个图片连接的时候，就没有注意到。于是，导致丢失。

最惨的是，此日志由于发表之后经过数次编辑，导致其中的代码中的等也丢失了，因此，致使大家无法正常使用ubb功能。

此次进行一次修正，不知道是否可以正常显示。

结果只有在编辑的时候将美元符号用$的十六进制形式写。而且再次编辑之后估计就又不行了。真是麻烦。

开始厌烦了，这个该死的自作聪明的编辑器。

我已经被惹火了。不但是美元符号不见了，语法高亮的诸如color:#nnnnnn;之类的，大部分都变成了奇怪的color:rgb(nn,nn,nn);

什么烂东西。

算了，反正只好采取其他的办法，这个美元符号我是没办法弄上去了。下边代码中的'￥'符号，替换成ASCII码的美元符号即可。

于2006.5.11 21:12 添加

终于忍受不了了，这个东西和歪酷的系统感觉有些不兼容，时常出现奇怪的问题。于是把我的blog上的相关的代码注释掉了。

//---------------两个之间的代码是表情图标用的。

转载、引用请注明出处，谢谢

   //------------------
  function addtext(s){
      document.getElementsByTagName("textarea")[0].value = document.getElementsByTagName("textarea")[0].value + s
  }
   //------------------
  //新增函数ubbClicked(n)。
  //作用：点击各个ubb按钮时的事件响应函数
  //弹出相应的提示的输入框，取得用户的输入，然后将格式化的ubb代码添加到评论框
  function ubbClicked(n){
      var v = document.getElementsByTagName("textarea")[0].value;
      var s = ""; //用于保存用户输入（主）
      var s1 = "";  //用于保存超链接情况时的链接文字
      switch(n){//不同的ubb按钮
          case 0://以此为例说明
              s = prompt("请输入要加粗显示的文字：","");//产生输入提示框
              if(s == null || s == "") return;//点击取消或者空输入的情况，则直接退出该函数
              v = v + "[b]"+ s +"[/b]";//格式化ubb代码，并添加到评论框内容末尾
              break;
          case 1:
              s = prompt("请输入要添加下划线的文字：","");
              if(s == null || s == "") return;
              v = v + "[u]" + s + "[/u]";
              break;
          case 2:
              s = prompt("请输入超链接的完整URL：","");
              if(s == null || s == "") return;
              else{
                  s1 = prompt("请输入超链接显示的文字(留空则显示链接地址)：","");
                  if(s1 == null) return;
                  if(s1 == ""){
                      v = v + "[url]"+ s +"[/url]";
                  }else{
                      v = v + "[url="+ s +"]" + s1 + "[/u]";
                  }
               }
               break;
          case 3:
              s = prompt("请输入图片的完整URL：","");
              if(s == null || s == "") return;
              v = v + "[img]" + s + "[/img]";
              break;
          default:
              break;
      }
       //更新评论框内容
      document.getElementsByTagName("textarea")[0].value = v;
  }
   if(document.getElementById("authcode_td1")){
      var i, j;
   //------------------
      var urlBase = "http://foto.yculblog.com/booker/";
      var smileyCode = new Array("[:-D]", "[:-)]", "[>_<]", "[:-(]", "[;-)]", "[*^_^*]", "[T_T]", "[-_-b]", "[:-O]", "[=_=]", "[#_#]", "[180]", "[@_@]", "[;-_-]", "[^.^]", "[XD]", "[-_-!!]");
      var smileyReg = new Array(/\[:-D\]/g, /\[:-\)\]/g, /\[&gt;_&lt;\]/g, /\[:-\(\]/g, /\[;-\)\]/g, /\[\*\^_\^\*\]/g, /\[T_T\]/g, /\[-_-b\]/g, /\[:-O\]/g, /\[=_=\]/g, /\[#_#\]/g, /\[180\]/g, /\[@_@\]/g, /\[;-_-\]/g, /\[\^\.\^\]/g, /\[XD\]/g, /\[-_-!!\]/g);
      var picName = new Array("m002", "m034", "m036", "m029", "m020", "m073", "m039", "m040", "m011", "m009", "m010", "m180", "m027", "m025", "m018", "m070", "m023");
   //------------------
      //新增的数组，保存正则表达式，用于匹配ubb代码
      var ubbRegxs = new Array(/(\[b\])(.+)(\[\/b\])/ig, /(\[u\])(.+)(\[\/u\])/ig, /(\[url\])(.+)(\[\/url\])/ig, /(\[url=(.+)\])(.+)(\[\/url\])/ig, /(\[img\])(.+)(\[\/img\])/ig);
   //------------------
      var s2 = "";
      for(i=0; i < picName.length; i++){
          s2 = s2 + "<img src='" + urlBase+picName[i] + ".gif' alt='' style='cursor:pointer;' onclick='addtext(\"" + smileyCode[i] + "\");' />";
          if(i>0&&i%6==0){
              s2=s2+"<br />";
          }
       }
   //------------------
      
      //get target
      var inputs = document.getElementsByTagName("input");
      var td,tbs;
      for(i=0; i < inputs.length; i++){
          if(inputs[i].getAttribute("name") == "is_private"){
              tbs = inputs[i].parentNode.parentNode.parentNode;
              break;
          }
       }
   //------------------
      //Smiley
      var trs = tbs.insertRow(5);
      if(trs){
          var tds = trs.insertCell(-1);
          if(tds){
              tds.innerHTML="图标";
              tds.setAttribute("align","right");
              tds.setAttribute("valign","top");
              tds.style.paddingTop = "20px";
          }
           td = trs.insertCell(-1);
          if(td){
              td.innerHTML=s2;
          }
       }
   //------------------
      //UBB按钮生成部分
      trs = tbs.insertRow(6);//在回复表单所在的表格中新建一行，行号为6
      if(trs){
          var tds = trs.insertCell(-1);//在该行末尾新建一个单元格
          if(tds){
              tds.innerHTML="UBB";//UBB标题文字
              tds.setAttribute("align","right");//靠右对弃
              tds.setAttribute("valign","top");//靠顶对弃
          }
           td = trs.insertCell(-1);//再在该行末尾新建一个单元格
          if(td){
              //为该单元格添加内容（四个按钮）
              //按钮包含onclick事件
              td.innerHTML = "<input type=\"button\" value=\"粗  体\" onclick=\"ubbClicked(0);return false;\"/>&nbsp;&nbsp;"
                          + "<input type=\"button\" value=\"下划线\" onclick=\"ubbClicked(1);return false;\"/>&nbsp;&nbsp;"
                          + "<input type=\"button\" value=\"超链接\" onclick=\"ubbClicked(2);return false;\"/>&nbsp;&nbsp;"
                          + "<input type=\"button\" value=\"图  片\" onclick=\"ubbClicked(3);return false;\"/>&nbsp;&nbsp;";
          }
       }
      
      //parser
      var blocks = document.getElementsByTagName("blockquote");
      for(i=0; i < blocks.length; i++){
   //------------------
          for(j=0; j < smileyReg.length; j++)
              blocks[i].innerHTML = blocks[i].innerHTML.replace( smileyReg[j], "<img src='" + urlBase + picName[j] + ".gif' alt='' />" );
   //------------------
          //新增内容，用于将回复中的ubb解析成对应的html
          //使用正则表达式及正则表达式的反向引用
          var s = blocks[i].innerHTML;
          s = s.replace(ubbRegxs[0], "<b>￥2</b>");
          s = s.replace(ubbRegxs[1], "<u>￥2</u>");
          s = s.replace(ubbRegxs[4], "<img src=\"￥2\" />");
          s = s.replace(ubbRegxs[2], "<a href=\"￥2\"></a>");
          s = s.replace(ubbRegxs[3], "<a href=\"￥2\"></a>");
          //此处开始处理ubb嵌套出现的问题
          s = s.replace( /(<a href=")(.*)(<b>)([^"]*)(<\/b>)([^"]*)">(.*)<\/a>/ig, "<a href=\"￥2￥4￥6\">￥7</a>");
          s = s.replace( /(<a href=")(.*)(<u>)([^"]*)(<\/u>)([^"]*)">(.*)<\/a>/ig, "<a href=\"￥2￥4￥6\">￥7</a>");
          s = s.replace( /(<img src=")(.*)(<b>)([^"]*)(<\/b>)([^"]*)"\s*\/>/ig, "<img src=\"￥2￥4￥6\" />");
          s = s.replace( /(<img src=")(.*)(<u>)([^"]*)(<\/u>)([^"]*)"\s*\/>/ig, "<img src=\"￥2￥4￥6\" />");
          //更新回复内容
          blocks[i].innerHTML = s;
      }
   }
Edited By Booker @2006-05-08 14:01:48
Edited By Booker @2006-05-08 16:53:39
关键词(Tag): javascript 脚本 innerhtml ubb

相关日志:

阅读2857次 评论20条 个人主页 扔小纸条 文件夹: 技术讨论
收藏: QQ书签 del.icio.us 订阅: Google 抓虾

最新评论 浏览全部的20条评论 »


  • 兔兔兔兔跳他
    2006-05-10 09:43:46

    我也记得，tikoshi回复的那篇也有上面他发的那张图片。

    啊啊，我的回复，不知道下次会是什么[T_T]

  • wuxinshi
    2006-05-10 10:59:46

    兔兄，这个是不是还不很稳定？如果是的话就等兔兄完善了我再来偷师[:-D]
    毕竟插不进图片的遗憾比失去一条评论要少得多

    不知道丢失评论和这个ubb代码有什么关系，但是无论怎样，不应该影响到歪酷的数据库的内容才是啊。不过那条评论确实消失的无影无踪。

    先不要用啦，一个是不稳定，一个是比较麻烦。[:-(]

  • tikoshi
    2006-05-10 13:55:58

    真的奇怪哈[;-_-]
    我记得我写了3条，中间那条有4个UBB测试的没了
    是不是你不小心删啦？

    我绝对没有删除[:-(]
  • 2006-05-11 20:20:08 http://hecate266.ycool.com/

    超好玩的说……
    [:-D]

    用力的踩过~哈哈！   

    诡异了，为什么这里的又有问题呢？

  • kaka
    2006-05-12 11:56:02 http://kaka12345.tianyablog.com

    网络全球化最明显的是带来地球村的显著特征，我绕来绕去，几个BLOG里看见不少熟银……[-_-b]
    楼上的栗子[XD]
    楼顶的ZERO[#_#]
    链接的砚鼠[:-(]
    不加你链接好像我就是外星人鸟[-_-!!]

    链吧链吧，网络还是很方便的。至少目前，给我省了不少的国际电话费。[;-)]
  • 2006-05-12 14:43:34 http://momo33.ycool.com/

    谢谢啦
    呵呵
    偶弄了几个钟头终于吧表情搬上去了
    看的头好晕啊
    这些代码……

    回过头来看看，我也头晕呢[@_@]
  • 2006-07-09 18:05:07 http://booboocase.ycool.com/

    我想问下怎样可以改用自己的表情？
    我上传了要的图，把原来别人相册的地址也改了，表情对应的名字也OK，就是显示不了……
    请教……
    [>_<]

    看来我来晚了，你已经用上了
  • 2006-09-13 23:21:57 http://tackey.ycool.com/

    [=_=]我的表情图片一字排开了 把blog撑得很宽 应该怎么改呢？

    看这篇，你需要改一下你每行显示图标的个数
  • 2006-10-02 19:43:51 http://lovesoo.ycool.com/

    [:-)]
    谢谢~

    嗯？你要用这个么？

    这个有问题的，最好不要用

  • noname
    2007-02-15 23:55:20 匿名 220.169.*.*

    关注您很久了

    请问我现在有  18个表情  想放2排
    现在我第一排有9 个
    第2排8个
    多一个在第3排   具体的参数我还是不会

    可以告诉我在什么地方调整吗?

    //这里是新增的变量，用于控制每行显示多少个图标，请适度。
       var smileyPerLine = 7;        

    分行的地方改成下边一段：

       /**********************自定义部分结束***************************/
       var i, j;
       var s2="";
       for(i=0; i < picName.length; i++){
           s2 = s2 + "<img src='" + urlBase+picName[i] + ".gif' alt='' style='cursor:pointer;' onclick='addtext(\"" + smileyCode[i] + "\");' />";
           if((i+1)%smileyPerLine==0){
               s2=s2+"<br />";
           }
       }
浏览全部的20条评论 »

发表评论

* 昵称

已经注册过? 请登录

新用户请先注册 以便能显示头像及追踪评论回复
Email
网址
* 评论
表情
 
 

分类小组论坛
杂谈, 娱乐、八卦, 文学、艺术, 体育, 旅游、同城, 象牙塔, 情感, 时尚、生活, 星座, 科技

请注意遵守中华人民共和国法律法规, 如威胁到本站生存, 将依法向有关部门报告, 同时本站的相关记录可能成为对您不利的证据.

相关法律法规
全国人大常委会关于维护互联网安全的决定
中华人民共和国计算机信息系统安全保护条例
中华人民共和国计算机信息网络国际联网管理暂行规定
计算机信息网络国际联网安全保护管理办法
计算机信息系统国际联网保密管理规定