教學演示-UBB,剪貼板,textRange及其他

2019-11-21 02:28:49

字體：大中小

來源：轉載

供稿：網友

這是一個給新手學習代碼的帖子，包含以下內容：
如何使用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   id="iwvjtn8m0"   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,"http://[").replace(//]/g,"http://]"))+strS3);         break;         case "[code]":             return(strS1+strS2.replace(//[/g,"http://[").replace(//]/g,"http://]")+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+"/"http://>"); } 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("http://");    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   class="iwvjtn8m0"   id="divMain"> <div   class="iwvjtn8m0"   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   class="iwvjtn8m0"   id="divContent" contentEditable="false"> </div> <textarea id="txtContent"></textarea> </div> </body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

上一篇：仿YAHOO的一個小效果下拉效果

下一篇：HTML里select的CSS樣式的改變