UBB 编辑器演示 (兼容 IE, Opera, Firefox) By shawl.qiu

UBB 编辑器演示 (兼容 IE, Opera, Firefox) By shawl.qiu


说明: 
这个很简单, 没啥好说明的.

哦, 还是有点需要说明, 这个UBB编辑器对应的解码与编码是服务端代码, 这个是秘密.

最近狂了解浏览器兼容技术, 已经有点小心点了. 
等着我的 HTML 编辑器吧, 照样兼容 IE, Opera, Firefox, 主要技术已经解决了. 

shawl.qiu
2006-11-23
http://blog.csdn.net/btbtd

UBB 编辑器演示 源代码:
  1. linenum
  2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  3. <script type="text/javascript">
  4.     /*-------------------------------------------------------*/
  5.      * UBB 编辑器演示 (兼容 IE, Opera, Firefox) By shawl.qiu
  6.      * 参数说明:
  7.      * target: 字符串, UBB 主编辑域 ID
  8.      * markup: 字符串, UBB 标签
  9.     /*-------------------------------------------------------*/
  10.     function ubbTag(target, markup){
  11.         var txa=document.getElementsByName(target)[0];
  12.         txa.focus();
  13.         var strEnd=markup.replace(//[/ig,'[/');
  14.         if (strEnd.indexOf('=')>-1){
  15.             strEnd=strEnd.replace(/(.*?)/=.*?/]/,'$1]');
  16.         }
  17.         if(document.selection&&document.selection.type== "Text"){
  18.         // IE, Opera
  19.                 var oStr=document.selection.createRange();
  20.                 oStr.text=markup+oStr.text+strEnd;
  21.         } else if(window.getSelection&&txa.selectionStart>-1) {
  22.         // Netscape
  23.             var st=txa.selectionStart;
  24.             var ed=txa.selectionEnd;
  25.                txa.value=txa.value.substring(0,st)+markup+
  26.                txa.value.substring(st,ed)+strEnd+
  27.                txa.value.slice(ed);
  28.         } else {
  29.             txa.value+=markup+strEnd;
  30.         }
  31.     } // shawl.qiu script
  32. //]]>
  33. </script>
  34. <form action="" method="post" name="ubbForm" id="ubbForm">
  35. <select οnchange="ubbTag('content', '['+this.value+']')">
  36.     <option value="h6">h6</option>
  37.     <option value="h5">h5</option>
  38.     <option value="h4">h4</option>
  39.     <option value="h3">h3</option>
  40.     <option value="h2">h2</option>
  41.     <option value="h1">h1</option>
  42.     <option value="h1" selected="selected">font size</option>
  43. </select>
  44. <select οnchange="ubbTag('content', '[color='+this.value+']')">
  45.     <option value="black">color</option>
  46.     <option value="black" style="background-color:black; color:#FFFFFF;">black</option>
  47.     <option value="blue" style="background-color:blue; color:#FFFFFF;">blue</option>
  48.     <option value="fuchsia" style="background-color:fuchsia; color:#FFFFFF;">fuchsia</option>
  49.     <option value="gray" style="background-color:gray; color:#FFFFFF;">gray</option>
  50.     <option value="green" style="background-color:green; color:#FFFFFF;">green</option>
  51.     <option value="lime" style="background-color:lime;">lime</option>
  52.     <option value="maroon" style="background-color:maroon; color:#FFFFFF;"> maroon </option>
  53.     <option value="navy" style="background-color:navy; color:#FFFFFF;">navy</option>
  54.     <option value="olive" style="background-color:olive; color:#FFFFFF;">olive</option>
  55.     <option value="orange" style="background-color:orange; color:#FFFFFF;">orange</option>
  56.     <option value="purple" style="background-color:purple; color:#FFFFFF;">purple</option>
  57.     <option value="red" style="background-color:red; color:#FFFFFF;">red</option>
  58.     <option value="silver" style="background-color:silver; color:#FFFFFF;">silver</option>
  59.     <option value="teal" style="background-color:teal; color:#FFFFFF;">teal</option>
  60.     <option value="white" style="background-color:white;">white</option>
  61.     <option value="yellow"style="background-color:yellow;">yellow</option>
  62. </select>
  63. <input type="button" value="url" οnclick="ubbTag('content', '[url]')"/>
  64. <input type="button" value="img" οnclick="ubbTag('content', '[img]')"/>
  65. <input type="button" value="email" οnclick="ubbTag('content', '[email]')"/>
  66. <input type="button" value="code" οnclick="ubbTag('content', '[code]')" />
  67. <input type="button" value="quote" οnclick="ubbTag('content', '[quote]')"/>
  68. <input type="button" value="cite" οnclick="ubbTag('content', '[cite]')"/>
  69. <input type="button" value="linenum" οnclick="ubbTag('content', '[linenum]')"/>
  70. <input type="button" value="b" οnclick="ubbTag('content', '[b]')"/> 
  71. <input type="button" value="left" οnclick="ubbTag('content', '[align=left]')"/> 
  72. <input type="button" value="center" οnclick="ubbTag('content', '[align=center]')"/> 
  73. <input type="button" value="right" οnclick="ubbTag('content', '[align=right]')"/> 
  74. <input type="button" value="textarea" οnclick="ubbTag('content', '[textarea]')"/>
  75. <input type="button" value="pre" οnclick="ubbTag('content', '[pre]')"/>
  76. <input type="button" value="xmp" οnclick="ubbTag('content', '[xmp]')"/> 
  77. <input type="button" value="sub" οnclick="ubbTag('content', '[sub]')"/> 
  78. <input type="button" value="sup" οnclick="ubbTag('content', '[sup]')"/> 
  79. <input type="button" value="abbr" οnclick="ubbTag('content', '[abbr]')"/>
  80. <input type="button" value="address" οnclick="ubbTag('content', '[address]')"/> 
  81. <input type="button" value="dl" οnclick="ubbTag('content', '[dl][dd]')"/> 
  82. <input type="button" value="dt" οnclick="ubbTag('content', '[dt]')"/> 
  83. <input type="button" value="dd" οnclick="ubbTag('content', '[dd]')"/> 
  84. <input type="button" value="nl" οnclick="ubbTag('content', '[nl][li]')"/> 
  85. <input type="button" value="ol" οnclick="ubbTag('content', '[ol][li]')"/> 
  86. <input type="button" value="ul" οnclick="ubbTag('content', '[ul][li]')"/> 
  87. <input type="button" value="li" οnclick="ubbTag('content', '[li]')"/> 
  88. <input type="button" value="floatleft" οnclick="ubbTag('content', '[float=left]')"/> 
  89. <input type="button" value="floatright" οnclick="ubbTag('content', '[float=right]')"/> 
  90. <input type="button" value="tagLink" οnclick="ubbTag('content', '[taglink]')"/> 
  91. <input type="button" value="glLink" οnclick="ubbTag('content', '[gllink]')"/> <br/>
  92.   <textarea name="content" cols="80" rows="10">aaaaaaaaaa</textarea><br/>
  93.   <input type="submit" name="Submit" value="Submit" />
  94.   <input type="reset" name="Reset" value="Reset" />
  95. </form>


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值