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

[转载] 引用页: http://www.jb51.net/article/3795.htm

<!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 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,"");
    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 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 id="divContent" contentEditable="false">
</div>
<textarea id="txtContent"></textarea>
</div>
</body>
</html>

本文来自: 脚本之家(www.jb51.net) 详细出处参考：http://www.jb51.net/article/3795.htm

posted on 2008-05-05 14:40 鱼跃于渊阅读(201) 评论(0) 编辑收藏举报

刷新页面返回顶部

鱼跃于渊

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

导航

公告