This is a post for beginners to learn the code, including the following:
How to use UBB code, how to use JS to interact with the Clipboard, how to use the TextRange object, how to use a custom shortcut key operation, how to automatically resize the page with the window size, the use of regular expressions and so on
Please read the code carefully, there are questions please ask, the current code development complete degree 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 "> <ptml> <pead> <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 XXFarEastFont. 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; ColorBlack } . 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=\" Run code \ "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) {//Recalculate input area size 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) {//Go to Code View 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) {//Go to Preview view 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; Convert HTML entity RE=HTMlencode (re); Masking UBB in HTML and Code Re=re.replace (/(\[html\)) ([\w\w]*?) (\[\/html\])/ig,ubb2html_escapeubb); Re=re.replace (/(\[code\]) ([\w\w]*?) (\[\/code\])/ig,ubb2html_escapeubb); Convert UBB code to HTML code 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, ""); Re=re.replace (/\[url\] ([\w\w]+?) \[\/url\]/ig, "$1<\/a>"); Re=re.replace (/\[url=) ([^\]]+?) \]/ig,ubb2html_url). Replace (/\[\/url\]/ig, "<\/a>"); Restores the UBB re=re.replace (/\\\[/g, "[") in HTML and code. 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 The 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 (/>/i G, ">"). 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 (""); 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); Alse); } 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+ "[/n]"; 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.len GTH-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); The function Keychar () {if (Event.shiftkey) {switch (event.keyCode.toString ()) {case "": "Return" ("0"); Case "the": Return ("1"); Case "the": Return ("2"); Case "the": Return ("3"); Case "a": Return ("4"); Case "a": Return ("5"); Case "102": Return ("6"); Case "the": Return ("7"); Case "rule": Return ("8"); Case "the": Return ("9"); Case "a": Return ("/"); Case "a": Return ("."); Case "the": Return ("*"); Case "109": Return ("-"); Case "a": Return ("+"); Case "144": Return ("NumLock"); Case "the": Return ("~"); Case "a": Return ("!"); Case "a": Return ("@"); Case "Wuyi": Return ("#"); Case "a": Return ("$"); Case "a": return ("%"); Case "Si": Return ("^"); Case "a": Return ("&"); Case "a": Return ("*"); Case "a": Return ("("); Case "a": Return (")"); Case "189": Return ("_"); Case "187": Return ("+"); Case "219": Return ("{"); Case "221": Return ("}"); Case "the": Return ("|"); Case "a": 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 "Bayi": Return ("Q"); Case "the": Return ("W"); Case "to": Return ("E"); Case "to": Return ("R"); Case "the": Return ("T"); Case "Mr": Return ("Y"); Case "the": Return ("U"); Case "the": Return ("I"); Case "the": Return ("O"); Case "No": Return ("P"); Case "the": Return ("A"); Case "a": Return ("S"); Case "to": Return ("D"); Case "a": Return ("F"); Case "the": Return ("G"); Case "a": Return ("H"); Case "the": Return ("J"); Case "a": Return ("K"); Case "a": Return ("L"); Case "a": Return ("shift"); Case "the": Return ("Z"); Case "the": Return ("X"); Case "a": Return ("C"); Case "the": Return ("V"); Case "a": Return ("B"); Case "the": Return ("N"); Case "a": Return ("M"); Case "a": Return ("Ctrl"); Case "a": Return ("Win"); Case "the": Return ("Win"); Case "a": Return ("Alt"); Case "a": Return (""); Case "a": Return ("menu"); Case "the": Return ("Up"); Case "a": Return ("Down"); Case "Panax Notoginseng": Return ("left"); Case "the": Return ("right"); Case "a": Return ("Insert"); Case "+": Return ("delete"); Case "a": Return ("Home"); Case "a": Return ("End"); Case "a": Return ("PageUp"); Case "a": Return ("PageDown"); Case "a": Return ("Printcreen"); Case "145": Return ("ScrollLock"); Case "a": Return ("pause"); Case "a": Return ("ESC"); Case "a": Return ("Middle"); Case "a": Return ("\ r \ n"); Case "112": Return ("F1"); Case "113": Return ("F2"); Case "114": Return ("F3"); Case "the": Return ("F4"); Case "116": Return ("F5"); Case "117": Return ("F6"); Case "118": Return ("F7"); Case "119": Return ("F8"); Case "a": Return ("F9"); Case "121": Return ("F10"); Case "122": Return ("F11"); Case "123": Return ("F12"); Default:return ("Unknown"); }else{switch (event.keyCode.toString ()) {case "," Return ("0"); Case "the": Return ("1"); Case "the": Return ("2"); Case "the": Return ("3"); Case "a": RETurn ("4"); Case "a": Return ("5"); Case "102": Return ("6"); Case "the": Return ("7"); Case "rule": Return ("8"); Case "the": Return ("9"); Case "a": Return ("/"); Case "a": Return ("."); Case "the": Return ("*"); Case "109": Return ("-"); Case "a": Return ("+"); Case "144": Return ("NumLock"); Case "the": Return ("'"); Case "a": Return ("1"); Case "a": Return ("2"); Case "Wuyi": Return ("3"); Case "a": Return ("4"); Case "a": Return ("5"); Case "WU": Return ("6"); Case "a": Return ("7"); Case "a": Return ("8"); Case "a": Return ("9"); Case "a": Return ("0"); Case "189": Return ("-"); Case "187": return ("="); Case "8": Return ("backspace"); Case "9": Return ("tab"); Case "Bayi": Return ("Q"); Case "the": Return ("W"); Case "to": Return ("E"); Case "to": Return ("R"); Case "the": Return ("T"); Case "Mr": Return ("Y"); Case "the": Return ("U"); Case "the": Return ("I"); Case "the": Return ("O"); Case "No": RETurn ("P"); Case "219": Return ("["); Case "221": Return ("]"); Case "the": Return ("\"); Case "a": Return ("Caplock"); Case "the": Return ("a"); Case "a": Return ("S"); Case "to": Return ("D"); Case "a": Return ("F"); Case "the": Return ("G"); Case "a": Return ("H"); Case "the": Return ("J"); Case "a": Return ("K"); Case "a": Return ("L"); Case "186": Return (";"); Case "222": Return ("'"); Case "a": Return ("shift"); Case "the": Return ("Z"); Case "the": Return ("X"); Case "a": Return ("C"); Case "the": Return ("V"); Case "a": Return ("B"); Case "the": Return ("n"); Case "a": Return ("M"); Case "188": Return (","); Case "190": Return ("."); Case "191": Return ("/"); Case "a": Return ("Ctrl"); Case "a": Return ("Win"); Case "the": Return ("Win"); Case "a": Return ("Alt"); Case "a": Return (""); Case "a": Return ("menu"); Case "the": Return ("Up"); Case "a": Return ("Down"); Case "Panax Notoginseng": Return ("left"); CaSe "the": Return ("right"); Case "a": Return ("Insert"); Case "+": Return ("delete"); Case "a": Return ("Home"); Case "a": Return ("End"); Case "a": Return ("PageUp"); Case "a": Return ("PageDown"); Case "a": Return ("Printcreen"); Case "145": Return ("ScrollLock"); Case "a": Return ("pause"); Case "a": Return ("ESC"); Case "a": Return ("Middle"); Case "a": Return ("\ r \ n"); Case "112": Return ("F1"); Case "113": Return ("F2"); Case "114": Return ("F3"); Case "the": Return ("F4"); Case "116": Return ("F5"); Case "117": Return ("F6"); Case "118": Return ("F7"); Case "119": Return ("F8"); Case "a": Return ("F9"); Case "121": Return ("F10"); Case "122": Return ("F11"); Case "123": Return ("F12"); Default:return ("Unknown"); }} </script> </pead> <body onload= "init ();" > <div id= "Divmain" > <div id= "divtools" > <label> view mode:</label> Code view Preview View <label> | Style tools: </label> Bold Italic code HTML run font + font-paste ubb paste HTML </div> <div id= "Divcontent" contenteditable= "false" > < /div> <textarea id= "txtcontent" ></textarea> </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]