打印

[原创]教学演示-UBB,剪贴板,textRange及其他

hutia [楼主]

诘屈聱牙

荣誉管理团队

帖子: 4717
体力: 14636
威望: 383
当前: 江苏苏州
离线: 11 天

专长 JS,PHP,ASP

1^# 大中小发表于 2006-3-29 07:23

这是一个给新手学习代码的帖子，包含以下内容：
如何使用UBB代码，如何用js与剪贴板交互，如何使用textRange对象，如何使用自定义的快捷键操作，如何自动随窗口大小调整页面内容尺寸，正则表达式的使用等等

请仔细阅读代码，有问题请提问，目前代码开发完成度80％，IE only

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "standards-compliant mode" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>Blue Idea UBB Code Edit</title>
<style>
* {
	margin:0px;
	padding:0px;
}
html, body {
	background-color:buttonface;
	width:100%;
	height:100%;
	overflow:hidden;
	border-width:0px;
	font-size:13px;
	font-family:Verdana Arial 宋体;
	color:#333333;
	cursor:default;
}
input {border-width:1px;}
#divMain {
	overflow:hidden;
}
#divTools {
	width:100%;
	height:20px;
	line-height:20px;
	overflow:hidden;
	border-bottom:1px solid buttonshadow;
	margin:0px;
	padding:0px;
	padding-left:10px;
	background-color:buttonface;
	color:black;
}
#divTools label { font-weight:bold;float:left;padding-left:15px;padding-right:15px;}
#divTools a {
	display:block;
	float:left;
	height:20px;
	padding-left:15px;
	padding-right:15px;
	line-height:20px;
	text-align:center;
	overflow:hidden;
	color:black;
	text-decoration:none;
}
#divTools a:hover {background-color:gold;color:black;}
#divTools a:active {background-color:navy;color:white;}
#divContent, #txtContent {
	border:1px inset buttonface;
	width:94%;
	height:400px;
	overflow:auto;
	padding:5px;
	margin:2px 15px 0px 15px;
	background-color:white;
	color:black;
	display:none;
}
#txtContent {
	font-size:14px;
	border-width:1px;
	display:block;
}
.UBB_code {
	border:1px solid #555;
	padding:10px;
	margin:10px;
	width:500px;
	background-color:#DDD;
	font-size:13px;
	font-weight:normal;
	color:black;
	
}
.UBB_html {
	padding:4px;
	width:350px;
	height:200px;
	font-size:13px;
	font-weight:normal;
	color:black;
}
.UBB_html_button {
	width:100px;
	height:22px;
	line-height:18px;
	border-width:2px;
	margin:0px;
}
</style>
<script type="text/javascript">
var txtContent, divContent, viewButton01, viewButton02, dtf;
var strHTMLStart="<div><textarea class=\"UBB_html\">";
var strHTMLEnd="<\/textarea><input type=\"button\" value=\"运行代码\" onclick=\"UBB_runCode(this);\" class=\"UBB_html_button\" \/><\/div>";
var strCodeStart="<div class=\"UBB_code\">";
var strCodeEnd="<\/div>";
function init(){
	txtContent=document.getElementById("txtContent");
	divContent=document.getElementById("divContent");
	viewButton01=document.getElementById("viewButton01");
	viewButton02=document.getElementById("viewButton02");
	
	dtfFrame=document.createElement("iframe");
	dtfFrame.frameBorder="0px";
	dtfFrame.style.width="0px";
	dtfFrame.style.height="0px";
	document.body.appendChild(dtfFrame);
	dtf=window.frames[window.frames.length-1];
	dtf.location.href="about:blank";
	
	window.onresize=switchModel;
	txtContent.onkeydown=chkKey;
	
	switchModel(0);
}
function switchModel(id){
	// 重新计算输入区域大小
	txtContent.style.width=document.body.clientWidth-50+"px";
	txtContent.style.height=document.body.clientHeight-50+"px";
	divContent.style.width=document.body.clientWidth-50+"px";
	divContent.style.height=document.body.clientHeight-50+"px";
	if(id==0){ // 转到代码视图
		divContent.style.display="none";
		txtContent.style.display="block";
		viewButton01.style.backgroundColor="navy";
		viewButton01.style.color="white";
		viewButton02.style.backgroundColor="";
		viewButton02.style.color="";
		txtContent.focus();
	}else if(id==1){ // 转到预览视图
		divContent.style.display="block";
		txtContent.style.display="none";
		divContent.innerHTML=UBB2HTML(txtContent.value);
		viewButton02.style.backgroundColor="navy";
		viewButton02.style.color="white";
		viewButton01.style.backgroundColor="";
		viewButton01.style.color="";
		divContent.focus();
	}
}
function HTML2UBB(strHTML){
	var re=htmlDecode(strHTML);
	re=re.replace(/<(\/?)strong>/ig,"[$1b]");
	re=re.replace(/<(\/?)b>/ig,"[$1b]");
	re=re.replace(/<(\/?)em>/ig,"[$1i]");
	re=re.replace(/<(\/?)i>/ig,"[$1i]");
	re=re.replace(/< *(\/?) *div[\w\W]*?>/ig,"\r\n");
	re=re.replace(/< *img +[\w\W]*?src=["]?([^">\r\n]+)[\w\W]*?>/ig,"[img]$1[/img]");
	re=re.replace(/< *a +[\w\W]*?href=["]?([^">\r\n]+)[\w\W]*?>([\w\W]*?)< *\/ *a *>/ig,"[url=$1]$2[/url]");
	re=re.replace(/<script[\w\W]+?<\/script>/ig,"");
	re=re.replace(/<[\w\W]*?>/ig,"");
	re=re.replace(/(\r\n){2,}/g,"\r\n");
	return(re);
}
function UBB2HTML(strUBB){
	var re=strUBB;
	// 转换HTML实体
	re=htmlEncode(re);
	// 屏蔽 html 和 code 中的 UBB 转意符
	re=re.replace(/(\[html\])([\w\W]*?)(\[\/html\])/ig,UBB2HTML_escapeUBB);
	re=re.replace(/(\[code\])([\w\W]*?)(\[\/code\])/ig,UBB2HTML_escapeUBB);
	// 转换UBB代码为HTML代码
	re=re.replace(/\[b\]/ig,"<b>").replace(/\[\/b\]/ig,"<\/b>");
	re=re.replace(/\[i\]/ig,"<i>").replace(/\[\/i\]/ig,"<\/i>");
	re=re.replace(/\[code\]/ig,strCodeStart).replace(/\[\/code\]/ig,strCodeEnd);
	re=re.replace(/\[html\]/ig,strHTMLStart).replace(/\[\/html\]/ig,strHTMLEnd);
	re=re.replace(/\[size=(\d)\]/ig,UBB2HTML_fontSize).replace(/\[\/size\]/ig,"<\/span>");
	re=re.replace(/\[img\]/ig,"<img src=\"").replace(/\[\/img\]/ig,"\" \/>");
	re=re.replace(/\[url\]([\w\W]+?)\[\/url\]/ig,"<a href=\"$1\">$1<\/a>");
	re=re.replace(/\[url=([^\]]+?)\]/ig,UBB2HTML_url).replace(/\[\/url\]/ig,"<\/a>");
	
	// 还原 html 和 code 中的 UBB 转意符
	re=re.replace(/\\\[/g,"[").replace(/\\\]/g,"]");
	return(re);
}
function UBB2HTML_escapeUBB(strAll,strS1,strS2,strS3){
	switch(strS1.toLowerCase()){
		case "[html]":
			return(strS1+htmlDecode(strS2.replace(/\[/g,"\\[").replace(/\]/g,"\\]"))+strS3);
		break;
		case "[code]":
			return(strS1+strS2.replace(/\[/g,"\\[").replace(/\]/g,"\\]")+strS3);
		break;
	}
}
function htmlEncode(strS){
	return(strS.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/ /g,"&nbsp;").replace(/\r\n/g,"<br\/>"));
}
function htmlDecode(strS){
	return(strS.replace(/<br\/?>/ig,"\r\n").replace(/&nbsp;/ig," ").replace(/&gt;/ig,">").replace(/&lt;/ig,"<").replace(/&amp;/ig,"&"));
}
function UBB_runCode(obj){
	theObj=obj;
	while(theObj=theObj.previousSibling)if(String(theObj.tagName).toLowerCase()=="textarea"){
		newWin=open();
		newWin.document.open();
		newWin.document.clear();
		newWin.document.write(theObj.value);
		newWin.document.close();
		return(true);
	}
}
function UBB2HTML_fontSize(str,i){
	return("<span style=\"font-size:"+(7+i*4)+"px;\">");
}
function UBB2HTML_url(str,strURL){
	return("<a href=\""+strURL+"\"\/>");
}
function chkKey(){
	var eK=keyChar().toLowerCase();
	switch(eK){
		case "tab":
			setUBB(eK);return(false);
		break;
		case "b": case "+": case "-":
			if(event.ctrlKey){
				setUBB(eK);return(false);
			}
		break;
		case "c": case "h": case "i":
			if(event.ctrlKey&&event.shiftKey){
				setUBB(eK);return(false);
			}
		break;
		case "v":
			if(event.ctrlKey&&event.shiftKey){
				chkPaste();return(false);
			}else if(event.ctrlKey&&event.altKey){
				chkPasteH();return(false);
			}
		break;
	}
}
function chkPaste(){
	txtContent.focus();
	tR=document.selection.createRange();
	dtf.document.body.innerHTML="";
	dtf.document.body.contentEditable=true;
	dtf.document.body.focus();
	dtf.document.execCommand("paste");
	tR.text=HTML2UBB(dtf.document.body.innerHTML);
	tR.select();
}
function chkPasteH(){
	txtContent.focus();
	tR=document.selection.createRange();
	dtf.document.body.innerHTML="";
	dtf.document.body.contentEditable=true;
	dtf.document.body.focus();
	dtf.document.execCommand("paste");
	tR.text=(dtf.document.body.innerHTML);
	tR.select();
}
function setUBB(type){
	var tR, strT, intSize;
	var typeCodes=new Array();
	switchModel(0);
	txtContent.focus();
	tR=document.selection.createRange();
	strT=tR.text;
	switch(type){
		case "tab":
			tR.text="\t";tR.collapse();tR.select();
		break;
		case "b":
			if(strT.match(/^\[b\][\w\W]*?\[\/b\]$/i)){
				tR.text=strT.substring(3,strT.length-4);
				tR.moveStart("character",-len(strT)+7);
				tR.select();
			}else{
				tR.text="[b]"+strT+"[/b]";
				if(strT==""){
					tR.moveStart("character",-4);tR.collapse();
				}else{
					tR.moveStart("character",-len(strT)-7);
				}
				tR.select();
			}
		break;
		case "i":
			if(strT.match(/^\[i\][\w\W]*?\[\/i\]$/i)){
				tR.text=strT.substring(3,strT.length-4);
				tR.moveStart("character",-len(strT)+7);
				tR.select();
			}else{
				tR.text="[i]"+strT+"[/i]";
				if(strT==""){
					tR.moveStart("character",-4);tR.collapse();
				}else{
					tR.moveStart("character",-len(strT)-7);
				}
				tR.select();
			}
		break;
		case "c":
			if(strT.match(/^\[code\][\w\W]*?\[\/code\]$/i)){
				tR.text=strT.substring(6,strT.length-7);
				tR.moveStart("character",-len(strT)+13);
				tR.select();
			}else{
				tR.text="[code]"+strT+"[\/code]";
				if(strT==""){
					tR.moveStart("character",-7);tR.collapse();
				}else{
					tR.moveStart("character",-len(strT)-13);
				}
				tR.select();
			}
		break;
		case "h":
			if(strT.match(/^\[html\][\w\W]*?\[\/html\]$/i)){
				tR.text=strT.substring(6,strT.length-7);
				tR.moveStart("character",-len(strT)+13);
				tR.select();
			}else{
				tR.text="[html]"+strT+"[\/html]";
				if(strT==""){
					tR.moveStart("character",-7);tR.collapse();
				}else{
					tR.moveStart("character",-len(strT)-13);
				}
				tR.select();
			}
		break;
		case "+":
			if(strT.match(/^\[size=\d\][\w\W]*?\[\/size\]$/i)){
				intSize=parseInt(strT.charAt(6))+1;
				if(intSize<10){
					tR.text=strT.substring(0,6)+intSize+strT.substring(7);
					tR.moveStart("character",-len(strT));
				}else{
					tR.text=strT.substring(8,strT.length-7);
					tR.moveStart("character",-len(strT)+15);
				}
				tR.select();
			}else{
				tR.text="[size=1]"+strT+"[/size]";
				if(strT==""){
					tR.moveStart("character",-7);tR.collapse();
				}else{
					tR.moveStart("character",-len(strT)-15);
				}
				tR.select();
			}
		break;
		case "-":
			if(strT.match(/^\[size=\d\][\w\W]*?\[\/size\]$/i)){
				intSize=parseInt(strT.charAt(6))-1;
				if(intSize>0){
					tR.text=strT.substring(0,6)+intSize+strT.substring(7);
					tR.moveStart("character",-len(strT));
				}else{
					tR.text=strT.substring(8,strT.length-7);
					tR.moveStart("character",-len(strT)+15);
				}
				tR.select();
			}else{
				tR.text="[size=9]"+strT+"[/size]";
				if(strT==""){
					tR.moveStart("character",-7);tR.collapse();
				}else{
					tR.moveStart("character",-len(strT)-15);
				}
				tR.select();
			}
		break;
		
	}
}
function len(str){
	return(str.replace(/\r\n/g,"\r").length);
}
function keyChar(){
 if(event.shiftKey){
  switch(event.keyCode.toString()){
   case "96":return("0");
   case "97":return("1");
   case "98":return("2");
   case "99":return("3");
   case "100":return("4");
   case "101":return("5");
   case "102":return("6");
   case "103":return("7");
   case "104":return("8");
   case "105":return("9");
   case "111":return("/");
   case "110":return(".");
   case "106":return("*");
   case "109":return("-");
   case "107":return("+");
   case "144":return("numlock");
   case "192":return("~");
   case "49":return("!");
   case "50":return("@");
   case "51":return("#");
   case "52":return("$");
   case "53":return("%");
   case "54":return("^");
   case "55":return("&");
   case "56":return("*");
   case "57":return("(");
   case "48":return(")");
   case "189":return("_");
   case "187":return("+");
   case "219":return("{");
   case "221":return("}");
   case "220":return("|");
   case "20":return("caplock");
   case "186":return(":");
   case "222":return("\"");
   case "188":return("<");
   case "190":return(">");
   case "191":return("?");
   case "8":return("backspace");
   case "9":return("tab");
   case "81":return("Q");
   case "87":return("W");
   case "69":return("E");
   case "82":return("R");
   case "84":return("T");
   case "89":return("Y");
   case "85":return("U");
   case "73":return("I");
   case "79":return("O");
   case "80":return("P");
   case "65":return("A");
   case "83":return("S");
   case "68":return("D");
   case "70":return("F");
   case "71":return("G");
   case "72":return("H");
   case "74":return("J");
   case "75":return("K");
   case "76":return("L");
   case "16":return("shift");
   case "90":return("Z");
   case "88":return("X");
   case "67":return("C");
   case "86":return("V");
   case "66":return("B");
   case "78":return("N");
   case "77":return("M");
   case "17":return("ctrl");
   case "91":return("win");
   case "92":return("win");
   case "18":return("alt");
   case "32":return(" ");
   case "93":return("menu");
   case "38":return("up");
   case "40":return("down");
   case "37":return("left");
   case "39":return("right");
   case "45":return("insert");
   case "46":return("delete");
   case "36":return("home");
   case "35":return("end");
   case "33":return("pageup");
   case "34":return("pagedown");
   case "34":return("printcreen");
   case "145":return("scrolllock");
   case "19":return("pause");
   case "27":return("esc");
   case "12":return("middle");
   case "13":return("\r\n");
   case "112":return("f1");
   case "113":return("f2");
   case "114":return("f3");
   case "115":return("f4");
   case "116":return("f5");
   case "117":return("f6");
   case "118":return("f7");
   case "119":return("f8");
   case "120":return("f9");
   case "121":return("f10");
   case "122":return("f11");
   case "123":return("f12");
   default:return("unknown");
  }
 }else{
  switch(event.keyCode.toString()){
   case "96":return("0");
   case "97":return("1");
   case "98":return("2");
   case "99":return("3");
   case "100":return("4");
   case "101":return("5");
   case "102":return("6");
   case "103":return("7");
   case "104":return("8");
   case "105":return("9");
   case "111":return("/");
   case "110":return(".");
   case "106":return("*");
   case "109":return("-");
   case "107":return("+");
   case "144":return("numlock");
   case "192":return("`");
   case "49":return("1");
   case "50":return("2");
   case "51":return("3");
   case "52":return("4");
   case "53":return("5");
   case "54":return("6");
   case "55":return("7");
   case "56":return("8");
   case "57":return("9");
   case "48":return("0");
   case "189":return("-");
   case "187":return("=");
   case "8":return("backspace");
   case "9":return("tab");
   case "81":return("q");
   case "87":return("w");
   case "69":return("e");
   case "82":return("r");
   case "84":return("t");
   case "89":return("y");
   case "85":return("u");
   case "73":return("i");
   case "79":return("o");
   case "80":return("p");
   case "219":return("[");
   case "221":return("]");
   case "220":return("\\");
   case "20":return("caplock");
   case "65":return("a");
   case "83":return("s");
   case "68":return("d");
   case "70":return("f");
   case "71":return("g");
   case "72":return("h");
   case "74":return("j");
   case "75":return("k");
   case "76":return("l");
   case "186":return(";");
   case "222":return("'");
   case "16":return("shift");
   case "90":return("z");
   case "88":return("x");
   case "67":return("c");
   case "86":return("v");
   case "66":return("b");
   case "78":return("n");
   case "77":return("m");
   case "188":return(",");
   case "190":return(".");
   case "191":return("/");
   case "17":return("ctrl");
   case "91":return("win");
   case "92":return("win");
   case "18":return("alt");
   case "32":return(" ");
   case "93":return("menu");
   case "38":return("up");
   case "40":return("down");
   case "37":return("left");
   case "39":return("right");
   case "45":return("insert");
   case "46":return("delete");
   case "36":return("home");
   case "35":return("end");
   case "33":return("pageup");
   case "34":return("pagedown");
   case "34":return("printcreen");
   case "145":return("scrolllock");
   case "19":return("pause");
   case "27":return("esc");
   case "12":return("middle");
   case "13":return("\r\n");
   case "112":return("f1");
   case "113":return("f2");
   case "114":return("f3");
   case "115":return("f4");
   case "116":return("f5");
   case "117":return("f6");
   case "118":return("f7");
   case "119":return("f8");
   case "120":return("f9");
   case "121":return("f10");
   case "122":return("f11");
   case "123":return("f12");
   default:return("unknown");
  }
 }
}
</script>
</head>
<body onload="init();">
<div id="divMain">
<div id="divTools">
<label>视图模式:</label>
<a href="javascript:void(switchModel(0));" id="viewButton01" >代码视图</a>
<a href="javascript:void(switchModel(1));" id="viewButton02" >预览视图</a>
<label> | 样式工具:</label>
<a href="javascript:void(setUBB('b'))" title="ctrl + b">黑体</a>
<a href="javascript:void(setUBB('i'))" title="ctrl + shift + i">斜体</a>
<a href="javascript:void(setUBB('c'))" title="ctrl + shift + c">代码</a>
<a href="javascript:void(setUBB('h'))" title="ctrl + shift + h">HTML 运行</a>
<a href="javascript:void(setUBB('+'))" title="ctrl + +">字体 + </a>
<a href="javascript:void(setUBB('-'))" title="ctrl + -">字体 - </a>
<a href="javascript:void(chkPaste())" title="ctrl + shift + v">粘贴UBB</a>
<a href="javascript:void(chkPasteH())" title="ctrl + alt + v">粘贴HTML</a>
</div>
<div id="divContent" contentEditable="false">
</div>
<textarea id="txtContent"></textarea>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

本帖最近评分记录

经典论坛大妈威望 +3 历史打分 2006-3-29 07:23

hutia归来...
老婆的小店
hutia的个人站点 - 有问题去这里问我

TOP

做西部数码代理.Cn1元国际45元 | 将虚拟化进行到底

grief

高级会员

帖子: 254
体力: 863
威望: 3
离线: 11 天

2^# 大中小发表于 2006-4-13 09:25

可惜是 IE only

点击这里给我发消息
四月天原创文学 yc.4yt.net

TOP

【美橙超级G空间】688元绑定10个子目录 | oracle工程师注册

liuchangliang

新手上路

帖子: 5
体力: 20
威望: 0
离线: 159 天

3^# 大中小发表于 2006-4-14 09:41

grief在上个帖子中说

引用:

可惜是 IE only

可以更新到支持FireFox，呵呵，是要够牛

TOP

请大家尊重和保护奥运知识产权。

hutia [楼主]

诘屈聱牙

荣誉管理团队

帖子: 4717
体力: 14636
威望: 383
当前: 江苏苏州
离线: 11 天

专长 JS,PHP,ASP

4^# 大中小发表于 2006-4-14 11:53

FF对textRange对象的操作和IE很不一样，实在不愿意费那个功夫，太痛苦了。

hutia归来...
老婆的小店
hutia的个人站点 - 有问题去这里问我

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!

ahuinan

阿会楠

高级会员

帖子: 466
体力: 971
威望: 1
当前: 广东广州

专长 JS,ASP,.NET

5^# 大中小发表于 2006-6-23 19:18

希望你可以介绍详细一点

sosuo8.com

TOP

m173

金牌会员

帖子: 5342
体力: 4773
威望: 0
当前: 广东珠海

专长 网页设计,平面

6^# 大中小发表于 2006-6-23 21:08

好的.放假就研究

>----------我就像路边的一坨屎,那样的渺小,那样的让人厌恶----------<

TOP

numa001

numa001

银牌会员

帖子: 1453
体力: 2043
威望: 2

7^# 大中小发表于 2006-11-1 09:39

运行这个怎么不行啊？

复制内容到剪贴板

代码:

[html]<textarea>第一个</textarea><textarea>第二个</textarea><textarea>第三个</textarea>[/html]

我都不敢勾选专长了。。

TOP

riechie

中级会员

帖子: 208
体力: 435
威望: 0
离线: 3 天

8^# 大中小发表于 2006-12-30 21:23

经典论坛收藏经典文章

TOP

xyflash

银牌会员

帖子: 901
体力: 1869
威望: 0

9^# 大中小发表于 2007-1-26 18:54

可惜不支持 FLASH RM等等....

TOP

wkcom

初级会员

帖子: 51
体力: 91
威望: 0
离线: 101 天

10^# 大中小发表于 2007-1-26 19:20

哈。学到些。

TOP

hurrayboy

新手上路

帖子: 22
体力: 45
威望: 0
当前: 北京海淀区
离线: 5 天

11^# 大中小发表于 2007-1-27 23:57

谢谢LZ,马上研究一下

Hurray

TOP