教学演示-UBB,剪贴板,textRange及其他
如何使用UBB代码，如何用js与剪贴板交互，如何使用textRange对象，如何使用自定义的快捷键操作，如何自动随窗口大小调整页面内容尺寸，正则表达式的使用等等
<!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,"[/uploadfile/jiaocheng/2014/0125/2014012519045810640b]");
re=re.replace(/<(\/?)b>/ig,"[/uploadfile/jiaocheng/2014/0125/2014012519045810640b]");
re=re.replace(/<(\/?)em>/ig,"[/uploadfile/jiaocheng/2014/0125/2014012519045810640i]");
re=re.replace(/<(\/?)i>/ig,"[/uploadfile/jiaocheng/2014/0125/2014012519045810640i]");
re=re.replace(/< *(\/?) *div[\w\W]*?>/ig,"\r\n");
re=re.replace(/< *img +[\w\W]*?src=["]?([^">\r\n]+)[\w\W]*?>/ig,"");
re=re.replace(/< *a +[\w\W]*?href=["]?([^">\r\n]+)[\w\W]*?>([\w\W]*?)< *\/ *a *>/ig,"$2");
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="/uploadfile/jiaocheng/2014/0125/2014012519045810640">/uploadfile/jiaocheng/2014/0125/2014012519045810640<\/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 "":
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=""+strT+"";
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=""+strT+"";
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="
