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

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

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