UBB例子

来源:互联网 发布:矢量图绘图软件 编辑:程序博客网 时间:2024/04/30 04:24

<script language="JavaScript" type="text/javascript">
<!--

// Startup variables
var imageTag = false;
var theSelection = false;

// Check for Browser & Platform for PC & IE specific bits
// More details from: http://www.mozilla.org/docs/web-developer/sniffer/browser_type.html
var clientPC = navigator.userAgent.toLowerCase(); // Get client info
var clientVer = parseInt(navigator.appVersion); // Get browser version

var is_ie = ((clientPC.indexOf("msie") != -1) && (clientPC.indexOf("opera") == -1));
var is_nav = ((clientPC.indexOf('mozilla')!=-1) && (clientPC.indexOf('spoofer')==-1)
                && (clientPC.indexOf('compatible') == -1) && (clientPC.indexOf('opera')==-1)
                && (clientPC.indexOf('webtv')==-1) && (clientPC.indexOf('hotjava')==-1));
var is_moz = 0;

var is_win = ((clientPC.indexOf("win")!=-1) || (clientPC.indexOf("16bit") != -1));
var is_mac = (clientPC.indexOf("mac")!=-1);

// Helpline messages
b_help = "粗体: [b]文字[/b]  (alt+b)";
i_help = "斜体: [i]文字[/i]  (alt+i)";
u_help = "下划线: [u]文字[/u]  (alt+u)";
q_help = "引用文字: [quote]文字[/quote]  (alt+q)";
c_help = "程序代码: [code]代码[/code]  (alt+c)";
l_help = "列表: [list]文字[/list] (alt+l)";
o_help = "顺序列表: [list=]文字[/list]  (alt+o)";
p_help = "插入图像: [img]http://image_url[/img]  (alt+p)";
w_help = "插入URL: [url]http://url[/url] 或 [url=http://url]URL文字[/url]  (alt+w)";
a_help = "关闭所有开启的 BBCode 标签";
s_help = "字体颜色: [color=red]文字[/color]  提示:您可以使用 color=#FF0000";
f_help = "字体大小: [size=x-small]小字体文字[/size]";
r_help = "插入Flash: [swf width=# height=#]http://swf_url[/swf]";

// Define the bbCode tags
bbcode = new Array();
bbtags = new Array('[b]','[/b]','[i]','[/i]','[u]','[/u]','[quote]','[/quote]','[code]','[/code]','[list]','[/list]','[list=]','[/list]','[img]','[/img]','[url]','[/url]','[swf width= height=]','[/swf]');
imageTag = false;

// Shows the help messages in the helpline window
function helpline(help) {
 document.post.helpbox.value = eval(help + "_help");
}


// Replacement for arrayname.length property
function getarraysize(thearray) {
 for (i = 0; i < thearray.length; i++) {
  if ((thearray[i] == "undefined") || (thearray[i] == "") || (thearray[i] == null))
   return i;
  }
 return thearray.length;
}

// Replacement for arrayname.push(value) not implemented in IE until version 5.5
// Appends element to the array
function arraypush(thearray,value) {
 thearray[ getarraysize(thearray) ] = value;
}

// Replacement for arrayname.pop() not implemented in IE until version 5.5
// Removes and returns the last element of an array
function arraypop(thearray) {
 thearraysize = getarraysize(thearray);
 retval = thearray[thearraysize - 1];
 delete thearray[thearraysize - 1];
 return retval;
}


function checkForm() {

 formErrors = false;

 if (document.post.message.value.length < 2) {
  formErrors = "您发表的文章必须有内容。";
 }

 if (formErrors) {
  alert(formErrors);
  return false;
 } else {
  bbstyle(-1);
  //formObj.preview.disabled = true;
  //formObj.submit.disabled = true;
  return true;
 }
}

function emoticon(text) {
 var txtarea = document.post.message;
 text = ' ' + text + ' ';
 if (txtarea.createTextRange && txtarea.caretPos) {
  var caretPos = txtarea.caretPos;
  caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? caretPos.text + text + ' ' : caretPos.text + text;
  txtarea.focus();
 } else {
  txtarea.value  += text;
  txtarea.focus();
 }
}

function bbfontstyle(bbopen, bbclose) {
 var txtarea = document.post.message;

 if ((clientVer >= 4) && is_ie && is_win) {
  theSelection = document.selection.createRange().text;
  if (!theSelection) {
   txtarea.value += bbopen + bbclose;
   txtarea.focus();
   return;
  }
  document.selection.createRange().text = bbopen + theSelection + bbclose;
  txtarea.focus();
  return;
 }
 else if (txtarea.selectionEnd && (txtarea.selectionEnd - txtarea.selectionStart > 0))
 {
  mozWrap(txtarea, bbopen, bbclose);
  return;
 }
 else
 {
  txtarea.value += bbopen + bbclose;
  txtarea.focus();
 }
 storeCaret(txtarea);
}


function bbstyle(bbnumber) {
 var txtarea = document.post.message;

 txtarea.focus();
 donotinsert = false;
 theSelection = false;
 bblast = 0;

 if (bbnumber == -1) { // Close all open tags & default button names
  while (bbcode[0]) {
   butnumber = arraypop(bbcode) - 1;
   txtarea.value += bbtags[butnumber + 1];
   buttext = eval('document.post.addbbcode' + butnumber + '.value');
   eval('document.post.addbbcode' + butnumber + '.value ="' + buttext.substr(0,(buttext.length - 1)) + '"');
  }
  imageTag = false; // All tags are closed including image tags :D
  txtarea.focus();
  return;
 }

 if ((clientVer >= 4) && is_ie && is_win)
 {
  theSelection = document.selection.createRange().text; // Get text selection
  if (theSelection) {
   // Add tags around selection
   document.selection.createRange().text = bbtags[bbnumber] + theSelection + bbtags[bbnumber+1];
   txtarea.focus();
   theSelection = '';
   return;
  }
 }
 else if (txtarea.selectionEnd && (txtarea.selectionEnd - txtarea.selectionStart > 0))
 {
  mozWrap(txtarea, bbtags[bbnumber], bbtags[bbnumber+1]);
  return;
 }

 // Find last occurance of an open tag the same as the one just clicked
 for (i = 0; i < bbcode.length; i++) {
  if (bbcode[i] == bbnumber+1) {
   bblast = i;
   donotinsert = true;
  }
 }

 if (donotinsert) {  // Close all open tags up to the one just clicked & default button names
  while (bbcode[bblast]) {
    butnumber = arraypop(bbcode) - 1;
    txtarea.value += bbtags[butnumber + 1];
    buttext = eval('document.post.addbbcode' + butnumber + '.value');
    eval('document.post.addbbcode' + butnumber + '.value ="' + buttext.substr(0,(buttext.length - 1)) + '"');
    imageTag = false;
   }
   txtarea.focus();
   return;
 } else { // Open tags

  if (imageTag && (bbnumber != 14)) {  // Close image tag before adding another
   txtarea.value += bbtags[15];
   lastValue = arraypop(bbcode) - 1; // Remove the close image tag from the list
   document.post.addbbcode14.value = "Img"; // Return button back to normal state
   imageTag = false;
  }

  // Open tag
  txtarea.value += bbtags[bbnumber];
  if ((bbnumber == 14) && (imageTag == false)) imageTag = 1; // Check to stop additional tags after an unclosed image tag
  arraypush(bbcode,bbnumber+1);
  eval('document.post.addbbcode'+bbnumber+'.value += "*"');
  txtarea.focus();
  return;
 }
 storeCaret(txtarea);
}

// From http://www.massless.org/mozedit/
function mozWrap(txtarea, open, close)
{
 var selLength = txtarea.textLength;
 var selStart = txtarea.selectionStart;
 var selEnd = txtarea.selectionEnd;
 if (selEnd == 1 || selEnd == 2)
  selEnd = selLength;

 var s1 = (txtarea.value).substring(0,selStart);
 var s2 = (txtarea.value).substring(selStart, selEnd)
 var s3 = (txtarea.value).substring(selEnd, selLength);
 txtarea.value = s1 + open + s2 + close + s3;
 return;
}

// Insert at Claret position. Code from
// http://www.faqts.com/knowledge_base/view.phtml/aid/1052/fid/130
function storeCaret(textEl) {
 if (textEl.createTextRange) textEl.caretPos = document.selection.createRange().duplicate();
}

//-->
</script>


<form action="posting.php" method="post" name="post" onsubmit="return checkForm(this)" >

<table width="450" border="0" cellspacing="0" cellpadding="2">
    <tr align="center" valign="middle">
   <td><span >
     <input type="button" class="button" accesskey="b" name="addbbcode0" value=" B " style="font-weight:bold; width: 30px" onClick="bbstyle(0)" onMouseOver="helpline('b')" />
     </span></td>
   <td><span >
     <input type="button" class="button" accesskey="i" name="addbbcode2" value=" i " style="font-style:italic; width: 30px" onClick="bbstyle(2)" onMouseOver="helpline('i')" />
     </span></td>
   <td><span >
     <input type="button" class="button" accesskey="u" name="addbbcode4" value=" u " style="text-decoration: underline; width: 30px" onClick="bbstyle(4)" onMouseOver="helpline('u')" />
     </span></td>
   <td><span >
     <input type="button" class="button" accesskey="q" name="addbbcode6" value="Quote" style="width: 50px" onClick="bbstyle(6)" onMouseOver="helpline('q')" />
     </span></td>
   <td><span >
     <input type="button" class="button" accesskey="c" name="addbbcode8" value="Code" style="width: 40px" onClick="bbstyle(8)" onMouseOver="helpline('c')" />
     </span></td>
   <td><span >
     <input type="button" class="button" accesskey="l" name="addbbcode10" value="List" style="width: 40px" onClick="bbstyle(10)" onMouseOver="helpline('l')" />
     </span></td>
   <td><span >
     <input type="button" class="button" accesskey="o" name="addbbcode12" value="List=" style="width: 40px" onClick="bbstyle(12)" onMouseOver="helpline('o')" />
     </span></td>
   <td><span >
     <input type="button" class="button" accesskey="p" name="addbbcode14" value="Img" style="width: 40px"  onClick="bbstyle(14)" onMouseOver="helpline('p')" />
     </span></td>
   <td><span >
     <input type="button" class="button" accesskey="w" name="addbbcode16" value="URL" style="text-decoration: underline; width: 40px" onClick="bbstyle(16)" onMouseOver="helpline('w')" />
     </span></td>
   <td><span >
     <input type="button" class="button" accesskey="r" name="addbbcode18" value="Flash" style="width: 40px" onClick="bbstyle(18)" onMouseOver="helpline('r')" />
     </span></td>
    </tr>
    <tr>
   <td colspan="10">
     <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td><span > &nbsp;字体颜色:
     <select name="addbbcode20" onChange="bbfontstyle('[color=' + this.form.addbbcode20.options[this.form.addbbcode20.selectedIndex].value + ']', '[/color]');this.selectedIndex=0;" onMouseOver="helpline('s')">
       <option style="color:black; background-color: #FAFAFA" value="#444444" >标准</option>
       <option style="color:darkred; background-color: #FAFAFA" value="darkred" >深红</option>
       <option style="color:red; background-color: #FAFAFA" value="red" >红色</option>
       <option style="color:orange; background-color: #FAFAFA" value="orange" >橙色</option>
       <option style="color:brown; background-color: #FAFAFA" value="brown" >棕色</option>
       <option style="color:yellow; background-color: #FAFAFA" value="yellow" >黄色</option>
       <option style="color:green; background-color: #FAFAFA" value="green" >绿色</option>
       <option style="color:olive; background-color: #FAFAFA" value="olive" >橄榄</option>
       <option style="color:cyan; background-color: #FAFAFA" value="cyan" >青色</option>
       <option style="color:blue; background-color: #FAFAFA" value="blue" >蓝色</option>
       <option style="color:darkblue; background-color: #FAFAFA" value="darkblue" >深蓝</option>
       <option style="color:indigo; background-color: #FAFAFA" value="indigo" >靛蓝</option>
       <option style="color:violet; background-color: #FAFAFA" value="violet" >紫色</option>
       <option style="color:white; background-color: #FAFAFA" value="white" >白色</option>
       <option style="color:black; background-color: #FAFAFA" value="black" >黑色</option>
     </select> &nbsp;字体大小:<select name="addbbcode22" onChange="bbfontstyle('[size=' + this.form.addbbcode22.options[this.form.addbbcode22.selectedIndex].value + ']', '[/size]')" onMouseOver="helpline('f')">
       <option value="7" >最小</option>
       <option value="9" >小</option>
       <option value="12" selected >标准</option>
       <option value="18" >大</option>
       <option  value="24" >最大</option>
     </select>
     </span></td>
      <td nowrap="nowrap" align="right"><span ><a href="javascript:bbstyle(-1)"  onMouseOver="helpline('a')">结束标签</a></span></td>
    </tr>
     </table>
   </td>
    </tr>
    <tr>
   <td colspan="10"> <span >
     <input type="text" name="helpbox" size="45" maxlength="100" style="width:450px; font-size:10px" class="helpline" value="提示:选择您需要装饰的文字,按上列按钮即可添加上相应的。" />
     </span></td>
    </tr>
    <tr>
   <td colspan="10"><span>
     <textarea name="message" rows="15" cols="35" wrap="virtual" style="width:450px" tabindex="3" class="post" onselect="storeCaret(this);" onclick="storeCaret(this);" onkeyup="storeCaret(this);"></textarea>
     </span></td>
    </tr>
  </table>
  
  
  </form>