UBB,剪贴板,textRange及其他

luckfly

这是一个给新手学习代码的帖子，包含以下内容：
如何使用UBB代码;
如何用js与剪贴板交互;
如何使用textRange对象;
如何使用自定义的快捷键操作;
如何自动随窗口大小调整页面内容尺寸;
正则表达式的使用等等.
请仔细阅读代码，有问题请提问，目前代码开发完成度80％，IE only
运行代码框
Blue Idea UBB Code Edit
* {
        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;
}
var txtContent, divContent, viewButton01, viewButton02, dtf;
var strHTMLStart="";
var strHTMLEnd="";
var strCodeStart="";
var strCodeEnd="";
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(//ig,"[$1b]");
        re=re.replace(//ig,"[$1b]");
        re=re.replace(//ig,"[$1i]");
        re=re.replace(//ig,"[$1i]");
        re=re.replace(//ig,"\r\n");
        re=re.replace(/\r\n]+)[\w\W]*?>/ig,"");
        re=re.replace(/\r\n]+)[\w\W]*?>([\w\W]*?)/ig,"$2");
        re=re.replace(//ig,"");
        re=re.replace(//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,"").replace(/\[\/b\]/ig,"");
        re=re.replace(/\[i\]/ig,"").replace(/\[\/i\]/ig,"");
        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,"");
        re=re.replace(/\[img\]/ig,"");
        re=re.replace(/\[url\]([\w\W]+?)\[\/url\]/ig,"$1");
        re=re.replace(/\[url=([^\]]+?)\]/ig,UBB2HTML_url).replace(/\[\/url\]/ig,"");
       
        // 还原 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(/\r\n/g,""));
}
function htmlDecode(strS){
        return(strS.replace(//ig,"\r\n").replace(/ /ig," ").replace(/>/ig,">").replace(/");
}
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);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="[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(intSize0){
                                        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=""+strT+"";
                                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 "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");
  }
}
}
视图模式:
代码视图
预览视图
| 样式工具:
黑体
斜体
代码
HTML 运行
字体 +
字体 -
粘贴UBB
粘贴HTML
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
经典论坛讨论帖：
http://www.blueidea.com/bbs/NewsDetail.asp?id=2513732


本文来自ChinaUnix博客，如果查看原文请点：http://blog.chinaunix.net/u/15511/showart_110931.html