<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="ubb.js"></script>
<body>
<img src="facelist.gif" align="absmiddle" id="ubb_expression" />
<img src="icon/text_bold.png" align="absmiddle" id="ubb_bold" />
<img src="icon/text_italic.png" align="absmiddle" id="ubb_italic" />
<img src="icon/text_underline.png" align="absmiddle" id="ubb_underline" />
<select id="ddl_size">
<option value="1">1字号</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
<select id="ddl_face">
<option value="Arial">Arial</option>
<%-- <option value="Times New Roman">Times New Roman</option>--%>
<option value="Symbol">Symbol </option>
<option value="黑体">黑体字体</option>
<option value="宋体">宋体</option>
<option value="楷体">楷体</option>
<option value="华文细黑">华文细黑</option>
<option value="WingDings">WingDings</option>
<option value="Times Roman">Times Roman</option>
<option value="Comic Sans MS">Comic Sans MS</option>
<option value="MS Sans Serif">MS Sans Serif</option>
</select>
<select id="dll_color">
<option style="background-color: #F0F8FF; color: #F0F8FF" value="#F0F8FF">#F0F8FF颜色</option>
<option style="background-color: #FAEBD7; color: #FAEBD7" value="#FAEBD7">#FAEBD7</option>
<option style="background-color: #00FFFF; color: #00FFFF" value="#00FFFF">#00FFFF</option>
<option style="background-color: #7FFFD4; color: #7FFFD4" value="#7FFFD4">#7FFFD4</option>
<option style="background-color: #F0FFFF; color: #F0FFFF" value="#F0FFFF">#F0FFFF</option>
<option style="background-color: #9ACD32; color: #9ACD32" value="#9ACD32">#9ACD32</option>
</select>
<br />
<textarea id="Content" name="Content" cols="70" rows="5"></textarea><br />
<br />
<input type="submit" name="button" id="button" value="提交" />
<label id="replyContent">
</label>
</body>
<script language="javascript">
$("#button").click(function(){
n=$("#Content").val();
$("#replyContent").append("<p>"+UBBToHtml(n)+"</p>");
$("#replyContent").val("");
});
ubb.js
$(function(){
$('#ubb_bold').click(function() { insertUBB('b'); }); //在文本框中插入UBB
$('#ubb_italic').click(function() { insertUBB('i'); });
$('#ubb_underline').click(function() { insertUBB('u'); });
$('#ddl_face').change(function() { insertUBB('face='+$(this).val()); });
$('#ddl_size').change(function() { insertUBB('size='+$(this).val()); });
$('#dll_color').change(function() { insertUBB('color='+$(this).val()); });
$('body').append($(faceDiv));//将图片加入到body中
$('#ubb_expression').click(function() {//当点击放在最外面的图片时，显示表情
$(faceDiv).show();
});
});
var insertUBB = function (html) {
var val = $('#Content').selection();
if (val == '') {
alert('请选择文字');
return false;
}
else {
var end = html;
if (html.indexOf('=') >= 0)
end = html.substring(0,html.indexOf('='));
$('#Content').parseHtml('['+html+']' + val + '[/'+end+']');
//parseHtml包裹结点，如果传入的是字符串，那么让它们变成一个元素节点，不过这元素节点也可以有许多层，在最内层把要包裹的元素放进
}
}
//插入表情
function insertFace(id){
$("#Content").parseHtml('[expr='+id+'][/expr]');
$(faceDiv).hide()
}
var faceDiv=document.createElement('div');
$(faceDiv).attr('id','ubb_expression_img')
.css({
display:'none',
position:'absolute',
visibility:'visible',
top:'40px',
left:'10px',
border:'1px solid #666'
});
for(var i=0;i<30;i++)
{
img = '<img onclick="insertFace('+ i +')" border="0" style="margin:2px;" src="face/' + i + '.gif">';
if(i%6==5) //图片的序号从0~29
$(faceDiv).append(img+'<br/>');
else
$(faceDiv).append(img);
}
//将UBB转化为html标签
function UBBToHtml(s){
//匹配：[UBB][/UBB]形式
if(s.match(//[(/w+)([^/[/]/s]*)/].*/[///1/]/))
{
//rContent=rContent.replace();
s = s.replace(//[color=([#0-9a-zA-Z]{1,10})/](.+?)/[//color/]/gi, "<font color='$1'>$2</font>");
s = s.replace(//[b/](.+?)/[//b/]/gi, "<b>$1</b>");
s = s.replace(//[i/](.+?)/[//i/]/gi, "<i>$1</i>");
s = s.replace(//[u/](.+?)/[//u/]/gi,"<u>$1</u>");
s = s.replace(//[size=([1-7])/](.+?)/[//size/]/gi,"<font size=$1>$2</font>");
s = s.replace(//[face=(.[^/[]*)/](.[^/[]*)/[//face/]/gi,"<font face='$1'>$2</font>");
s = s.replace(//[expr=(/d*)/]/[//expr/]/gi,"<img src=face/$1.gif/>");
}
return s;
}
$.fn.extend({
selection: function() {
var txt = '';
var doc = this.get(0).document;
if (doc) {
var sel = doc.selection.createRange();
if (sel.text.length > 0)
txt = sel.text;
}
else if (this.get(0).selectionStart || this.get(0).selectionStart == '0') {
var s = this.get(0).selectionStart;
var e = this.get(0).selectionEnd;
if (s != e) {
txt = this.get(0).value.substring(s, e);
}
}
return $.trim(txt);
},
parseHtml: function(t) {
var doc = this.get(0).document;
if (doc) {
this.get(0).focus();
doc.selection.createRange().collapse;
this.get(0).document.selection.createRange().text = t;
}
else if (this.get(0).selectionStart || this.get(0).selectionStart == '0') {
var s = this.get(0).selectionStart;
var e = this.get(0).selectionEnd;
var val = this.get(0).value;
var start = val.substring(0,s);
var end = val.substring(e);
this.get(0).value = start + t + end;
}
}
})