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

时间：2020-11-26 22:33:34|栏目：JavaScript代码|点击：次

这是一个给新手学习代码的帖子，包含以下内容：
如何使用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>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

上一篇：javascirpt实现2个iframe之间传值的方法

栏目：JavaScript代码

下一篇：Bootstrap开关(switch)控件学习笔记分享

本文标题：教学演示-UBB,剪贴板,textRange及其他

本文地址：http://www.codeinn.net/misctech/26542.html

更多JavaScript代码

JavaScript代码

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

阅读排行

推荐教程