UBB代码的应用

下面为效果显示

UBB代码编辑器

文本:

演示:

代码:

小知识：
UBB代码是HTML的一个变种。你也许已经对它很熟悉了。一般情况下，如果允许你用HTML，也就可以使用UBB代码。即使你的讨论区不能让你使用HTML，你也可以使用YBB代码。由于要求使用的编码很少，即使可以使用HTML，你可能也想使用YBB代码，因为代码错误的可能性大大减小了。

脚本说明:
第一步：把如下代码加入<body>区域中
<STYLE type=text/css>
A:link {
	TEXT-DECORATION: none
}
A:visited {
	TEXT-DECORATION: none
}
A:hover {
	TEXT-DECORATION: underline
}
A:link {
	
}
A:hover {
	COLOR: red
}
.c {
	FONT: 9pt/12pt 宋体; TEXT-DECORATION: none
}
.d {
	FONT: 13.5pt/15.5pt 宋体; TEXT-DECORATION: none
}
BODY {
	FONT-SIZE: 9pt; FONT-FAMILY: 宋体
}
TABLE {
	FONT-SIZE: 9pt; FONT-FAMILY: 宋体
}
TextBox {
	FONT-SIZE: 9pt; FONT-FAMILY: "宋体"; BACKGROUND-COLOR: #f7f7f7
}
PasswordBox {
	FONT-SIZE: 9pt; FONT-FAMILY: "宋体"; BACKGROUND-COLOR: #f7f7f7
}
TEXTAREA {
	FONT-SIZE: 9pt; FONT-FAMILY: "宋体"; BACKGROUND-COLOR: #f7f7f7
}
Checkbox {
	FONT-SIZE: 9pt; FONT-FAMILY: "宋体"; BACKGROUND-COLOR: #f7f7f7
}
Radio {
	FONT-SIZE: 9pt; FONT-FAMILY: "宋体"; BACKGROUND-COLOR: #f7f7f7
}
SELECT {
	FONT-SIZE: 9pt; FONT-FAMILY: "宋体"; BACKGROUND-COLOR: #f7f7f7
}
INPUT {
	FONT-SIZE: 9pt; COLOR: #000000; PADDING-TOP: 3px; BACKGROUND-COLOR: #f7f7f7
}
.unnamed1 {
	FONT-SIZE: 10pt; COLOR: #333333; FONT-FAMILY: "宋体", "Arial"; BACKGROUND-COLOR: #0099cc
}
.unnamed2 {
	FONT-SIZE: 10pt; COLOR: #000000; FONT-FAMILY: "宋体", "Arial"; TEXT-DECORATION: none
}
</STYLE>

<SCRIPT language=JavaScript>
var head="display:''"
function doit(header){
var head=header.style
if (head.display=="none")
head.display=""
else
head.display="none"
}
function begin() {
ubbcode=samplehtml=""
imghtml=imgubb=""
colorbegin=colorend=colorbeginhtml=colorendhtml=""
fontbegin=fontend=fontbeginhtml=fontendhtml=""
sizebegin=sizeend=sizebeginhtml=sizeendhtml=""
centerbegin=centerend=centerbeginhtml=centerendhtml=""
ubegin=uend=ubeginhtml=uendhtml=""
bbegin=bend=bbeginhtml=bendhtml=""
ibegin=iend=ibeginhtml=iendhtml=""
linkbegin=linkend=linkbeginhtml=linkendhtml=""
sampletext="范例文字"
document.tool.ubbcode.value=ubbcode
document.all.eOutput.innerHTML=samplehtml
document.tool.sample.value=sampletext
}
function printsample(){
samplehtml=centerbeginhtml+linkbeginhtml+sizebeginhtml+ubeginhtml+bbeginhtml+ibeginhtml+fontbeginhtml+colorbeginhtml+imghtml+sampletext+colorendhtml+fontendhtml+iendhtml+bendhtml+uendhtml+sizeendhtml+linkendhtml+centerendhtml
document.all.eOutput.innerHTML=samplehtml
}
function printubbcode() {
ubbcode=centerbegin+linkbegin+sizebegin+ubegin+bbegin+ibegin+fontbegin+colorbegin+imgubb+sampletext+colorend+fontend+iend+bend+uend+sizeend+linkend+centerend
document.tool.ubbcode.value=ubbcode
document.tool.sample.value=sampletext
printsample();
}
function sampleupdate(stxt){
sampletext=stxt
printubbcode();
}
function paste() {
opener.document.PostTopic.Message.value+=ubbcode
}
function showcolor(color){
colorbegin="[color="+color+"]"
colorend="[/color]"
colorbeginhtml="<font color=\""+color+"\">"
colorendhtml="</font>"
printubbcode();
}
function center() {
if (centerbegin!="") {
centerbegin=centerend=centerbeginhtml=centerendhtml=""
} else {
centerbegin="[center]"
centerend="[/center]"
centerbeginhtml="<center>"
centerendhtml="</center>"
}
printubbcode();
}
function bold() {
if (bbegin!="") {
bbegin=bend=bbeginhtml=bendhtml=""
} else {
bbegin="[b]"
bend="[/b]"
bbeginhtml="<b>"
bendhtml="</b>"
}
printubbcode();
}
function marquee() {
if (centerbegin!="") {
centerbegin=centerend=centerbeginhtml=centerendhtml=""
} else {
centerbegin="[marquee]"
centerend="[/marquee]"
centerbeginhtml="<marquee>"
centerendhtml="</marquee>"
}
printubbcode();
}
function italicize() {
if (ibegin!="") {
ibegin=iend=ibeginhtml=iendhtml=""
} else {
ibegin="[i]"
iend="[/i]"
ibeginhtml="<i>"
iendhtml="</i>"
}
printubbcode();
}
function yin() {
if (ibegin!="") {
ibegin=iend=ibeginhtml=iendhtml=""
} else {
ibegin="[QUOTE]"
iend="[/QUOTE]"
ibeginhtml="<QUOTE>"
iendhtml="</QUOTE>"
}
printubbcode();
}
function bao() {
if (ibegin!="") {
ibegin=iend=ibeginhtml=iendhtml=""
} else {
ibegin="[code]"
iend="[/code]"
ibeginhtml="<pre>"
iendhtml="</pre>"
}
printubbcode();
}
function underline() {
if (ubegin!="") {
ubegin=uend=ubeginhtml=uendhtml=""
} else {
ubegin="[u]"
uend="[/u]"
ubeginhtml="<u>"
uendhtml="</u>"
}
printubbcode();
}
function img(){
imgtxt=prompt("链接图像.","http://");
if(imgtxt!=null){
imgubb="[img]"+imgtxt+"[/img]"
imghtml="<img src=\""+imgtxt+"\" border=0>"
sampletext=""
printubbcode();
}
}
function flash(){
imgtxt=prompt("链接FLASH.","http://");
if(imgtxt!=null){
imgubb="[embed]"+imgtxt+"[/embed]"
imghtml="<embed src=\""+imgtxt+"\" ></embed>"
sampletext=""
printubbcode();
}
}
function showsize(size){
sizebegin="[size="+size+"]"
sizeend="[/size]"
sizebeginhtml="<font size=\""+size+"\">"
sizeendhtml="</font>"
printubbcode();
}
function hyperlink(){
urltxt=prompt("超级链接.","http://");
if(urltxt!=null){
sampletext=urltxt
document.tool.sample.value=sampletext
linkbegin="[url]"
linkend="[/url]"
linkbeginhtml="<a href=\""+urltxt+"\">"
linkendhtml="</a>"
printubbcode();
}
}
function email(){
urltxt=prompt("Email地址.","name@domain.com");
if(urltxt!=null){
sampletext=urltxt
document.tool.sample.value=sampletext
linkbegin="[email]"
linkend="[/email]"
linkbeginhtml="<a href=\"mailto:"+urltxt+"\">"
linkendhtml="</a>"
printubbcode();
}
}
function openWindow(url) {
popupWin = window.open('ybbcode.htm','','scrollbars=yes')
}
</SCRIPT>
<CENTER>
      <FORM name=tool><SPAN class=unnamed1></SPAN><SPAN 
      class=unnamed1></SPAN><SPAN class=unnamed1></SPAN><SPAN 
      class=unnamed1></SPAN>
      <TABLE cellSpacing=0 borderColorDark=white cellPadding=0 width=420 
      align=center bgColor=silver borderColorLight=black border=1>
        <CENTER>
        <TBODY>
        <TR>
          <TD align=middle height=17>UBB代码编辑器</TD></TR>
        <TR>
          <TD>
            <TABLE cellSpacing=1 cellPadding=1 border=0>
              <TBODY>
              <TR>
                <TD noWrap><IMG onclick=bold() height=22 alt=加粗 
                  src="1217/bold.jpg" width=23 border=0><IMG 
                  onclick=italicize() height=22 alt=倾斜 
                  src="1217/italicize.jpg" width=23 border=0><IMG 
                  onclick=underline() height=22 alt=下划线 
                  src="1217/underline.jpg" width=23 border=0> <IMG 
                  onclick=center() height=22 alt=居中 src="1217/center.jpg" 
                  width=23 border=0><IMG onclick=marquee() height=22 alt=移动文字 
                  src="1217/list.jpg" width=23 border=0> <IMG onclick=bao() 
                  height=22 alt=保持格式 src="1217/same.jpg" width=23 
                  border=0><IMG onclick=yin() height=22 alt=引用其它信息 
                  src="1217/yin.jpg" width=23 border=0> <IMG 
                  onclick=hyperlink() height=22 alt=链接 src="1217/url.jpg" 
                  width=23 border=0><IMG onclick=email() height=22 alt=插入Email 
                  src="1217/ybbemail.jpg" width=23 border=0><IMG 
                  onclick=img() height=22 alt=插入图像 src="1217/ybbimage.jpg" 
                  width=23 border=0><IMG onclick=flash() height=23 alt=插入FLASH动画 
                  src="1217/flash.jpg" width=23 border=0></TD>
                <TD align=right width="100%"><SELECT 
                  onchange=showsize(this.options[this.selectedIndex].value) 
                  size=1 name=size> <OPTION value=1 selected>8pt</OPTION> 
                    <OPTION value=2>10pt</OPTION> <OPTION value=3>12pt</OPTION> 
                    <OPTION value=4>14pt</OPTION> <OPTION value=5>16pt</OPTION> 
                    <OPTION value=7>18pt</OPTION></SELECT> <SELECT 
                  onchange=showcolor(this.options[this.selectedIndex].value) 
                  name=color> <OPTION style="COLOR: black" value=Black 
                    selected>黑色</OPTION> <OPTION style="COLOR: silver" 
                    value=Silver>银色</OPTION> <OPTION style="COLOR: gray" 
                    value=Gray>灰色</OPTION> <OPTION style="COLOR: maroon" 
                    value=Maroon>茶色</OPTION> <OPTION style="COLOR: red" 
                    value=Red>红色</OPTION> <OPTION style="COLOR: purple" 
                    value=Purple>紫色</OPTION> <OPTION style="COLOR: fuchsia" 
                    value=Fuchsia>紫红</OPTION> <OPTION style="COLOR: green" 
                    value=Green>绿色</OPTION> <OPTION style="COLOR: lime" 
                    value=Lime>亮绿</OPTION> <OPTION style="COLOR: olive" 
                    value=Olive>橄榄</OPTION> <OPTION style="COLOR: yellow" 
                    value=Yellow>黄色</OPTION> <OPTION style="COLOR: teal" 
                    value=Teal>深蓝</OPTION> <OPTION style="COLOR: blue" 
                    value=Blue>蓝色</OPTION> <OPTION style="COLOR: teal" 
                    value=Teal>青色</OPTION> <OPTION style="COLOR: aqua" 
                    value=Aqua>浅绿</OPTION> <OPTION style="COLOR: pink" 
                    value=Pink>粉红</OPTION> <OPTION style="COLOR: orange" 
                    value=Orange>橙色</OPTION> <OPTION style="COLOR: brown" 
                    value=Brown>褐色</OPTION> <OPTION style="COLOR: navy" 
                    value=Navy>海蓝</OPTION></SELECT> 
        </TD></TR></TBODY></TABLE></TD></TR></CENTER>
        <TR>
          <TD align=right>
            <TABLE cellSpacing=1 cellPadding=1 width=390 border=0>
              <CENTER></CENTER>
              <TBODY>
              <TR>
                <CENTER>
                <TD align=right width=32><FONT class=c>文本</FONT><FONT class=c 
                  face=Tahoma></FONT><FONT class=c face=Tahoma size=1>: 
                </FONT></TD></CENTER>
                <TD width=344>
                  <P align=right><TEXTAREA style="OVERFLOW: auto" name=sample cols=54 onchange=sampleupdate(this.value)></TEXTAREA> 
                  </P></TD></TR></TBODY></TABLE></TD></TR>
        <CENTER>
        <TR>
          <TD align=right>
            <TABLE cellSpacing=1 cellPadding=1 width=390 border=0>
              <TBODY>
              <TR>
                <TD vAlign=top align=right width=35><FONT 
                  class=c>演示</FONT><FONT class=c face=Tahoma></FONT><FONT 
                  class=c face=Tahoma size=1>: </FONT></TD>
                <TD>
                  <TABLE height=50 cellSpacing=0 borderColorDark=white 
                  cellPadding=0 width="100%" borderColorLight=black border=1>
                    <TBODY>
                    <TR>
                      <TD bgColor=white>
                        <DIV 
            id=eOutput></DIV></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR>
        <TR>
          <TD align=right>
            <TABLE cellSpacing=1 cellPadding=1 border=0>
              <TBODY>
              <TR>
                <TD vAlign=top align=right width=35>代码:</TD>
                <TD><TEXTAREA style="OVERFLOW: auto" name=ubbcode rows=5 cols=54></TEXTAREA> 
                </TD></TR></TBODY></TABLE></TD></TR>
        <TR>
          <TD>
            <TABLE cellSpacing=1 cellPadding=1 width="100%" border=0>
              <TBODY>
              <TR>
                <TD class=c>  <INPUT class=unnamed1 style="FONT-SIZE: 9pt; COLOR: #ffffff" onclick=window.close() type=button value=关闭 name=button> 
<INPUT class=unnamed1 style="FONT-SIZE: 9pt; COLOR: #ffffff" onclick=begin() type=reset value=清除 name=reset> 
<INPUT class=unnamed1 style="FONT-SIZE: 9pt; COLOR: #ffffff" onclick=javascript:this.form.ubbcode.focus();this.form.ubbcode.select(); type=button value=选择全部 name=button2> 
                </TD></TR></TBODY></TABLE></TD></TR></CENTER></TBODY></TABLE><BR>
      <TABLE cellSpacing=0 cellPadding=0 width=500 align=center border=0>
        <TBODY>
        <TR>
          <TD><SPAN class=unnamed2>小知识：<BR>     
            UBB代码是HTML的一个变种。你也许已经对它很熟悉了。一般情况下，如果允许你用HTML，也就可以使用UBB代码。即使你的讨论区不能让你使用HTML，你也可以使用YBB代码。 
            由于要求使用的编码很少，即使可以使用HTML，你可能也想使用YBB代码，因为代码错误的可能性大大减小了。 
        </SPAN></TD></TR></TBODY></TABLE></FORM>

第二步：把<body>中的内容改为：
<body  onload=begin()>