教学演示-UBB,剪贴板,textRange及其他- Javascript

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 教学演示-UBB,剪贴板,textRange及其他

技术文章搜索

关键字

Javascript 中的教学演示-UBB,剪贴板,textRange及其他

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 157 ::

收藏到网摘: n/a

脚本和web页共用同一个文件测试仿YAHOO的一个小效果下拉效果

这是一个给新手学习代码的帖子，包含以下内容：
如何使用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,"&").replace(/</g," ").replace(/>/g,">").replace(/ /g," ").replace(/\r\n/g,"<br\/>"));
}
function htmlDecode(strS){ return(strS.replace(/<br\/?>/ig,"\r\n").replace(/ /ig," ").replace(/>/ig,">").replace(/</ig,"<").replace(/ /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>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

脚本和web页共用同一个文件测试仿YAHOO的一个小效果下拉效果

Javascript 中的 教学演示-UBB,剪贴板,textRange及其他

评论 (0) All

Javascript 中的教学演示-UBB,剪贴板,textRange及其他