教学演示-UBB,剪贴板,textRange及其他
这是一个给新手学习代码的帖子，包含以下内容：
如何使用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,"[img]$1[/img]");
re=re.replace(/\r\n]+)[\w\W]*?>([\w\W]*?)/ig,"[url=$1]$2[/url]");
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(/</ig,"");
}
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="[b]"+strT+"[/b]";
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="[i]"+strT+"[/i]";
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="[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 "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 全选 注:如需引入外部Js需刷新才能执行]
您可能感兴趣的文章:
- 光标定位等TextRange的操作的范例代码
- 使用TextRange获取输入框中光标的位
- Using the TextRange Object
- 教学演示-UBB,剪贴板,textRange及其他
- 使用TextRange获取输入框中光标的位置的代码
- js createRange与createTextRange的一些用法实例
- createTextRange()的使用示例含文本框选中部分文字内容
- 处理文本部分内容的TextRange对象应用实例
- JavaScript中textRange对象使用方法小结
Tags：教学演示-UBB 剪贴板 textRange及其他
相关文章
- 2015-04-0412行javascript代码绘制一个八卦图
- 2008-06-06比较详细的javascript DOM 学习笔记
- 2016-08-08又一款js时钟!transform实现时钟效果
- 2013-07-07捕获键盘事件(且兼容各浏览器)
- 2017-03-03JavaScript实现经纬度转换成地址功能
- 2015-08-08js钢琴按钮波浪式图片排列效果代码分享
- 2016-06-06JavaScript操作 url 中 search 部分方法函数
- 2016-10-10移动端滑动插件Swipe教程
- 2015-12-12js简单网速测试方法完整实例
- 2008-07-07JS的数组的扩展实例代码