UBB,剪貼簿,textRange及其他

來源:互聯網
上載者:User
ubb|剪貼簿

這是一個給新手學習代碼的文章,包含以下內容:

如何使用UBB代碼;
如何用js與剪貼簿互動;
如何使用textRange對象;
如何使用自訂的快速鍵操作;
如何自動隨視窗大小調整頁面內容尺寸;
Regex的使用等等.

請仔細閱讀代碼,有問題請提問,目前代碼開發完成度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,"[http://www.alixixi.com/web/a/$1b]"); re=re.replace(/<(\/?)b>/ig,"[http://www.alixixi.com/web/a/$1b]"); re=re.replace(/<(\/?)em>/ig,"[http://www.alixixi.com/web/a/$1i]"); re=re.replace(/<(\/?)i>/ig,"[http://www.alixixi.com/web/a/$1i]"); 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(/\<font 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=\"http://www.alixixi.com/web/a/$1\">http://www.alixixi.com/web/a/$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+"</font>"; if(strT==""){ tR.moveStart("character",-7);tR.collapse(); }else{ tR.moveStart("character",-len(strT)-15); } tR.select(); } break; case "-": if(strT.match(/^\<font 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+"</font>"; 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 全部選擇 提示:你可先修改部分代碼,再按運行]



相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

11.11 Big Sale for Cloud

Get Unbeatable Offers with up to 90% Off,Oct.24-Nov.13 (UTC+8)

Get It Now >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。