当前位置: 代码迷 >> Web前端 >> 教授教养演示-UBB,剪贴板,textRange及其他
  详细解决方案

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

热度:316   发布时间:2012-10-09 10:21:45.0
教学演示-UBB,剪贴板,textRange及其他
如何使用UBB代码,如何用js与剪贴板交互,如何使用textRange对象,如何使用自定义的快捷键操作,如何自动随窗口大小调整页面内容尺寸,正则表达式的使用等等



<!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,"[/img/2012/09/19/2223413381b]");
    re=re.replace(/<(\/?)b>/ig,"[/img/2012/09/19/2223413381b]");
    re=re.replace(/<(\/?)em>/ig,"[/img/2012/09/19/2223413381i]");
    re=re.replace(/<(\/?)i>/ig,"[/img/2012/09/19/2223413381i]");
    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(/\[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=\"/img/2012/09/19/2223413381\">/img/2012/09/19/2223413381<\/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 "":
            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=""+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="
"+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>
详细出处参考:http://www.jb51.net/article/369.htm
  相关解决方案