ubb编辑器制作

风清扬斈 13年前 (2008-03-04) 信息科技 3521 0

<script>
/*
* 功能:UBB编辑控制函数
* 参数: tag 为标签名称 val 为标签参数
* 返回:[标签名称=参数]修饰文字[/标签名称]
* [标签名称]修饰文字[/标签名称]
* [标签名称=参数][/标签名称]
*/
function ubbaction(tag, val){
var tag = tag.toUpperCase();
if(typeof(val) == "undefined"){
val = "";
}
if(val){
val = "=" + val;
}

var r = document.selection.createRange().text;
if(tag == "URL"){
val = prompt("请输入连接地址:(留空为选定地址)", "http://");
if(val != "http://" && val != ""){
val = "=" + val;
}else{
val = "";
}
}
if(tag == "MAIL"){
val = prompt("请输入邮箱地址:(留空为选定地址)", "");
if(val != ""){
val = "=" + val;
}
}
rr = "[" + tag + val + "]" + r + "[/" + tag +"]";
if(r){
document.selection.createRange().text = rr;
}else{
document.all.content.value += rr;
}
}
</script>
<form name="form1" method="post" action="">
<input type="button" name="Submit" value="B" onClick="ubbaction(’B’)">
<input type="button" name="Submit" value="I" onClick="ubbaction(’I’)">
<input type="button" name="Submit" value="U" onClick="ubbaction(’U’)">
<select name=’ffont’ onChange="ubbaction(’FONT’, this.options[this.selectedIndex].value); this.value = 0;">
<option value=’0’>FONT</option>
<option value=’Arial’ style=’font-family:Arial’>Arial</option>
<option value=’Times’ style=’font-family:Times’>Times</option>
<option value=’Courier’ style=’font-family:Courier’>Courier</option>
<option value=’Impact’ style=’font-family:Impact’>Impact</option>
<option value=’Geneva’ style=’font-family:Geneva’>Geneva</option>
<option value=’Optima’ style=’font-family:Optima’>Optima</option>
</select>
<select name=’fsize’ onChange="ubbaction(’SIZE’, this.options[this.selectedIndex].value); this.value = 0;">
<option value=’0’>SIZE</option>
<option value=’1’>Small</option>
<option value=’7’>Large</option>
<option value=’14’>Largest</option>
</select>
<select name=’fcolor’ onChange="ubbaction(’COLOR’, this.options[this.selectedIndex].value); this.value = 0;">
<option value=’0’>COLOR</option>
<option value=black style="background-color:black;color:black">Black</option>
<option value=red style="background-color:red;color:red">Red</option>
<option value=yellow style="background-color:yellow;color:yellow">Yellow</option>
<option value=pink style="background-color:pink;color:pink">Pink</option>
<option value=green style="background-color:green;color:green">Green</option>
<option value=orange style="background-color:orange;color:orange">Orange</option>
<option value=purple style="background-color:purple;color:purple">Purple</option>
<option value=blue style="background-color:blue;color:blue">Blue</option>
<option value=beige style="background-color:beige;color:beige">Beige</option>
<option value=brown style="background-color:brown;color:brown">Brown</option>
<option value=teal style="background-color:teal;color:teal">Teal</option>
<option value=navy style="background-color:navy;color:navy">Navy</option>
<option value=maroon style="background-color:maroon;color:maroon">Maroon</option>
<option value=limegreen style="background-color:limegreen;color:limegreen">LimeGreen</option>
</select>
<br>
<input type="button" name="Submit" value="URL" onClick="ubbaction(’URL’)">
<input type="button" name="Submit" value="IMG" onClick="ubbaction(’IMG’)">
<input type="button" name="Submit" value="CODE" onClick="ubbaction(’CODE’)">
<input type="button" name="Submit" value="MAIL" onClick="ubbaction(’MAIL’)">
<input type="button" name="Submit" value="QUOTE" onClick="ubbaction(’QUOTE’)">
<input type="button" name="Submit" value="LIST" onClick="ubbaction(’LIST’)">
<br>
<textarea name="content" cols="50" rows="8" id="content"></textarea>
<input type="submit" name="Submit" value="提交">
</form>
------------------

function   AddText(FormName,Name,NewCode){  
  document.FormName.Name.value+=NewCode  
  }  
  function   bold()  
  {  
  if   (document.selection   &&   document.selection.type   ==   "Text")    
          {var   range   =   document.selection.createRange();  
            range.text   =   "[b]"   +   range.text   +   "[/b]";  
          }  
  }  
  function   incline()  
  {  
  if   (document.selection   &&   document.selection.type   ==   "Text")    
          {var   range   =   document.selection.createRange();  
            range.text   =   "[i]"   +   range.text   +   "[/i]";  
          }  
  }  
  function   underline()  
  {  
  if   (document.selection   &&   document.selection.type   ==   "Text")    
          {var   range   =   document.selection.createRange();  
            range.text   =   "[u]"   +   range.text   +   "[/u]";  
          }  
  }  
  function   showcolor(a)  
  {  
  if   (document.selection   &&   document.selection.type   ==   "Text"   &&   a!="默认")  
          {var   range   =   document.selection.createRange();  
            range.text   =   "[color:(i)"+a+"(i)]"   +   range.text   +   "[/color]";  
          }  
  }  
  function   cfs(b)  
  {  
  if   (document.selection   &&   document.selection.type   ==   "Text"   &&   b!="默认")  
          {var   range   =   document.selection.createRange();  
            range.text   =   "[size:(i)"+b+"(i)]"   +   range.text   +   "[/size]";  
          }  
  }  
  function   center()  
  {  
  if   (document.selection   &&   document.selection.type   ==   "Text")    
          {var   range   =   document.selection.createRange();  
            range.text   =   "[center]"   +   range.text   +   "[/center]";  
          }  
  }  
  function   dq(c)  
  {  
  if   (document.selection   &&   document.selection.type   ==   "Text"   &&   c!="默认")  
          {var   range   =   document.selection.createRange();  
            range.text   =   "[$parab:"+c+"$]"   +   range.text   +   "[$/parab$]";  
          }  
  }  
  function   dh(d)  
  {  
  if   (document.selection   &&   document.selection.type   ==   "Text"   &&   d!="默认")  
          {var   range   =   document.selection.createRange();  
            range.text   =   "[$para:"+d+"$]"   +   range.text   +   "[$/para$]";  
          }  
  }  
------------------

String.prototype.UBB=function() 

var str=this; 
str=str.replace(/[br]/ig,"<br/>");/*回车*/ 
str=str.replace(/[u](.+?)[/u]/ig,"<u>$1</u>");/*下划线*/ 
str=str.replace(/[i](.+?)[/i]/ig,"<i>$1</i>");/*斜体*/ 
str=str.replace(/[b](.+?)[/b]/ig,"<b>$1</b>");/*粗体*/ 
str=str.replace(/[QUOTE](.+?)[/QUOTE]/ig,"<BLOCKQUOTE><font size=2 face="Verdana, Arial">引用:</font><HR>$1<HR></BLOCKQUOTE>");/*引用*/ 
str=str.replace(/[red](.+?)[/red]/ig,"<FONT COLOR="#ff0000">$1</FONT>");/*红色字*/ 
str=str.replace(/[gray](.+?)[/gray]/ig,"<FONT COLOR="#77ACAC">$1</FONT>");/*灰色字*/ 
str=str.replace(/[green](.+?)[/green]/ig,"<FONT COLOR="#77ACAC">$1</FONT>");/*绿色字*/ 
str=str.replace(/[blue](.+?)[/blue]/ig,"<FONT COLOR="#0055ff">$1</FONT>");/*蓝色字*/ 
str=str.replace(/[color=(.+?)](.+?)[/color]/ig,"<FONT COLOR="$1">$2</FONT>");/*任何颜色*/ 
str=str.replace(/[EMAIL](S+@S+?)[/EMAIL]/ig,"<A HREF="mailto:$1">$1</A>");/*邮件*/ 
str=str.replace(/[URL](http://S+?)[/URL]/ig,"<A HREF="$1" TARGET=_blank>$1</A>");/*链接http://*/ 
str=str.replace(/[URL](S+?)[/URL]/ig,"<A HREF="http://$1" TARGET=_blank>$1</A>");/*链接*/ 
str=str.replace(/[marquee](.+?)[/marquee]/ig,"<marquee scrollamount="3" onmouseover="javascript:this.stop()" onmouseout="javascript:this.start()">$1</marquee>");/*滚动*/ 
str=str.replace(/[IMGurl=(http://S+?)](http://S+?)[/IMGurl]/ig,"<a href="$1" target=_blank><IMG SRC="$2" border=0 onload="javascript:if(this.width>screen.width-366)this.width=screen.width-366"/></a>");/*带图片链接http://*/ 
str=str.replace(/[IMGurl=(S+?)](S+?)[/IMGurl]/ig,"<a href="http://$1" target=_blank><IMG SRC="http://$2" border=0 onload="javascript:if(this.width>screen.width-366)this.width=screen.width-366"/></a>");/*带图片链接*/ 
str=str.replace(/[IMG](S+?)[/IMG]/ig,"<IMG SRC="$1"/>");/*图片*/ 
return str; 




使用时就直接 
str = str.UBB(); 

就可以了 
----------------

1// JScript 文件
 2/**//*
 3    作者:Terry_12
 4    Copyright(c) 2006-2007,
 5    MSN:zhuojian@live.com,
 6*/
 7
 8var Options = {
 9    B:{Exp : /[b(?:s*)]([s]||[sS]+?)[/b(?:s*)]/ig,Str : "<b>$1</b>"},
10    I:{Exp : /[i(?:s*)]([s]||[sS]+?)[/i(?:s*)]/ig,Str : "<i>$1</i>"},
11    U:{Exp : /[u(?:s*)]([s]||[sS]+?)[/u(?:s*)]/ig,Str : "<i>$1</i>"},
12    P:{Exp : /(( )*[p])(.*?)(( )*[/p])/,Str : "<p>$3</p>"},
13    Sub:{Exp : /[sup(?:s*)]([s]||[sS]+?)[/sup(?:s*)]/ig,Str : "<sub>$1</sub>"},
14    Url1:{Exp : /[url(?:s*)](www.(.*?))[/url(?:s*)]ig/,Str : "<a href="http://$1" target="_blank">$1</a>"},
15    Url2:{Exp : /[url(?:s*)]s*((https?://|ftp://|gopher://|news://|telnet://|rtsp://|mms://|callto://|bctp://|ed2k://)([^["’]+?))s*[/url(?:s*)]/ig,Str : "<a href="http://$1" target="_blank">$1</a>"},
16    Url3:{Exp : /[url=www.([^["’]+?)(?:s*)]([sS]+?)[/url(?:s*)]/,Str : "<a href="http://www.$1" target="_blank">$2</a>"},
17    Url4:{Exp : /[url=((https?://|ftp://|gopher://|news://|telnet://|rtsp://|mms://|callto://|bctp://|ed2k://)([^["’]+?))(?:s*)]([sS]+?)[/url(?:s*)]/ig,Str : "<a href="$1" target="_blank">$4</a>"},
18    Email1:{Exp : /[email(?:s*)](.*?)[/email]/ig,Str : "<a href="mailto:$1" target="_blank">$1</a>"},
19    Email2:{Exp : /[email=(.[^[]*)(?:s*)](.*?)[/email(?:s*)]/ig,Str : "<a href="mailto:$1" target="_blank">$2</a>"},
20    Color:{Exp : /[color=([^[<]+?)]([s]||[sS]+?)[/color(?:s*)]/ig,Str : "<font color="$1">$2</font>"},
21    Size1:{Exp : /[size=(d+?)]([s]||[sS]+?)[/size(?:s*)]/ig,Str : "<font size="$1">$2</font>"},
22    Size2:{Exp : /[size=(d+(.d+)?(px|pt|in|cm|mm|pc|em|ex|%)+?)]([s]||[sS]+?)[/size(?:s*)]/ig,Str : "<font style="font-size: $1">$2</font>"},
23    Font:{Exp : /[font=([^[<]+?)]([s]||[sS]+?)[/font(?:s*)]/ig,Str : "<font face="$1">$2</font>"},
24    Align:{Exp : /[align=([^[<]+?)]([s]||[sS]+?)[/align(?:s*)]/ig,Str : "<p align="$1">$2</p>"},
25    Float:{Exp : /[float=([^[<]+?)]([s]||[sS]+?)[/float(?:s*)]/ig,Str : "<br style="clear: both" /><span style="float: $1;">$2</span>"},
26    Indent:{Exp : /[indent(?:s*)]([s]||[sS]+?)[/indent(?:s*)]/ig,Str : "<blockquote>$1</blockquote>"},
27    Simpletag:{Exp : /[simpletag(?:s*)]([s]||[sS]+?)[/simpletag(?:s*)]/ig,Str : "<blockquote>$1</blockquote>"},
28    List1:{Exp : /[list]([s]||[sS]+?)[/list]/ig,Str : "<ul>$1</ul>"},
29    List2:{Exp : /[list=(1|A|a|I|i| )]([s]||[sS]+?)[/list]/ig,Str : "<ul type="$1">$2</ul>"},
30    Li:{Exp : /[*]/,Str : "<li>"},
31    SHADOW:{Exp : /([SHADOW=)(d*?),(#*w*?),(d*?)]([s]||[sS]+?)([/SHADOW])/ig,Str : "<table width=’$2’  style=’filter:SHADOW(COLOR=$3, STRENGTH=$4)’>$5</table>"},
32    Glow:{Exp : /([glow=)(d*?),(#*w*?),(d*?)]([s]||[sS]+?)([/glow])/ig,Str : "<table width=’$2’  style=’filter:GLOW(COLOR=$3, STRENGTH=$4)’>$5</table>"},
33    Center:{Exp : /[center]([s]||[sS]+?)[/center]/ig,Str : "<center>$1</center>"}
34}
35var Face = {
36    gima0106 :{ Exp : /[gima0106]/ig, Image : "gima0106.gif"},
37    gima0101 :{ Exp : /[gima0101]/ig, Image : "gima0101.gif"},
38    gima0114 :{ Exp : /[gima0114]/ig, Image : "gima0114.gif"},
39    gima0121 :{ Exp : /[gima0121]/ig, Image : "gima0121.gif"},
40    gima0122 :{ Exp : /[gima0122]/ig, Image : "gima0122.gif"},
41    gima0125 :{ Exp : /[gima0125]/ig, Image : "gima0125.gif"},
42    gima0129 :{ Exp : /[gima0129]/ig, Image : "gima0129.gif"},
43    gima0133 :{ Exp : /[gima0133]/ig, Image : "gima0133.gif"},
44    gima0135 :{ Exp : /[gima0135]/ig, Image : "gima0135.gif"},
45    gima0136 :{ Exp : /[gima0136]/ig, Image : "gima0136.gif"},
46    gima0137 :{ Exp : /[gima0137]/ig, Image : "gima0137.gif"},
47    gima0140 :{ Exp : /[gima0140]/ig, Image : "gima0140.gif"},
48    gima0142 :{ Exp : /[gima0142]/ig, Image : "gima0142.gif"},
49    gima0143 :{ Exp : /[gima0143]/ig, Image : "gima0143.gif"},
50    gima0144 :{ Exp : /[gima0144]/ig, Image : "gima0144.gif"},
51    gima0146 :{ Exp : /[gima0146]/ig, Image : "gima0146.gif"},
52    gima0149 :{ Exp : /[gima0149]/ig, Image : "gima0149.gif"},
53    gima0141 :{ Exp : /[gima0141]/ig, Image : "gima0141.gif"},
54    gima0150 :{ Exp : /[gima0150]/ig, Image : "gima0150.gif"},
55    gima0151 :{ Exp : /[gima0151]/ig, Image : "gima0151.gif"},
56    gima0152 :{ Exp : /[gima0152]/ig, Image : "gima0152.gif"},
57    gima0153 :{ Exp : /[gima0153]/ig, Image : "gima0153.gif"}
58}
59
60var imagePath = "App_Themes/default/images/"
61
62function Jubb(s){
63    for(f in Face){
64        var fs = Face[f];
65        s = s.replace(fs.Exp,"<img src=’" +imagePath+fs.Image + "’ />");
66    }
67
68    for(key in Options){
69        var o = Options[key];
70        o.Exp.ignoreCase = true;
71        s = s.replace(o.Exp,o.Str);
72    }
73    
74    var quote = /[quote]([sS]+?)[/quote]/ig
75    quote.ignoreCase = true;
76    var intQuoteIndexOf = s.toLowerCase().indexOf("[quote]");
77    var quotecount = 0;
78    
79    while(intQuoteIndexOf >= 0 && s.toLowerCase().indexOf("[/quote]") >= 0 && quotecount < 3){
80        quotecount ++;
81        s = s.replace(quote,"<br /><br /><div class=msg1>引用:</div><div class=msg2>$1</div>");
82        
83        intQuoteIndexOf = s.toLowerCase().indexOf("[quote]", intQuoteIndexOf + 7);
84    }
85    
86    return s;
87}
88简单讲解一下吧。
包含两个JSON:
    1.Options 存放正则及替换表达式(Exp和Str)。
    2.Face 存放自定义表情的正则和替换表达式(Exp和Str)。
调用的方法为Jubb().在方法中主要进行的是3个步骤:替换UBB、替换表情和替换[quote]。因为[Quote]涉及多层嵌套所以要特殊处理。
主要看一下替换UBB表情的代码块: for(key in Options){
    var o = Options[key];
    o.Exp.ignoreCase = true;
    s = s.replace(o.Exp,o.Str);
}在这里首先介绍一个JS中的特性。比如一个对象o包含字段Name。那么字段的值可以通过o.Name或o[“Name”]获取。
那么就很清楚在这个循环中做了什么了:遍历所有Option的字段,根据这些字段中的正则表达式(Exp)将输入字符串以字段的替换表达式(Str)替换。

表情的替换方式其实和UBB的替换方式一样。这里就不需要详细讲解了。
如果需要增加或者修改UBB代码只需要修改JSON中的值就行了。

第一篇。。平时基本不写文章也不写BLOG。。写的不是很清楚。。请见谅。。 

"

相关推荐

  • 网友评论

    • (*)

    最新评论