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

这是一个给新手学习代码的帖子，包含以下内容：
如何使用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\" \/><\/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,"[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,""); 
    re=re.replace(/\[url\]([\w\W]+?)\[\/url\]/ig,"代码视图 
预览视图 
<label> | 样式工具:</label> 
黑体 
斜体 
代码 
HTML 运行 
字体 +  
字体 -  
粘贴UBB 
粘贴HTML

</div> 
<div id="divContent" contentEditable="false"> 
</div> 
<textarea id="txtContent"></textarea> 
</div> 
</body> 
</html>

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

«
»

PHP教程

PHP简介 PHP基本语法 PHP类型 PHP变量 PHP运算符 PHP控制结构 PHP函数 PHP类与对象 PHP异常处理函数库分类