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

2020-05-11 我要评论

这是一个给新手学习代码的帖子，包含以下内容：
如何使用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\" \/><\https://img.qb5200.com/download-x/div>"; 
var strCodeStart="<div>"; 
var strCodeEnd="<\https://img.qb5200.com/download-x/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 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 onerror="javascript:this.src='/skin1/img/error.jpg';" 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,"\\[").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 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 len(str){ 
    return(str.replace(/\r\n/g,"\r").length); 
}

</div> 
<div> 
</div> 
<textarea id="txtContent"></textarea> 
</div> 
</body> 
</html>

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

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

相关文章

猜您喜欢

今日热门