教学演示-UBB,剪贴板,textRange及其他
发布时间：2024-09-28 19:24:57
标签：教学演示-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 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,"[$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 src=\"").replace(/\[\/img\]/ig,"\" \/>"); re=re.replace(/\[url\]([\w\W]+?)\[\/url\]/ig,"$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,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/ /g,"&nbsp;").replace(/\r\n/g,"<br\/>")); } function htmlDecode(strS){ return(strS.replace(/<br\/?>/ig,"\r\n").replace(/&nbsp;/ig," ").replace(/&gt;/ig,">").replace(/&lt;/ig,"<").replace(/&amp;/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(""); } 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(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> 代码视图 预览视图 <label> | 样式工具:</label> 黑体 斜体 代码 HTML 运行 字体 + 字体 - 粘贴UBB 粘贴HTML </div> <div id="divContent" contentEditable="false"> </div> <textarea id="txtContent"></textarea> </div> </body> </html>
0
投稿猜你喜欢
- 查看表空间的名称及大小代码如下:SQL>select t.tablespace_name, round(sum(bytes/(1024
一、前言在Python中，除了可以自定义模块外，还可以引用其他模块，主要包括使用标准库和第三方模块。下面分别进行介绍。二、导入和使用标准模块- 定义： 何为触发器？在SQL Server里面也就是对某一个表的一定的操作，触发某种条件，从而执行的一段程序。触发器是一个特殊的存储过程。
- 1、需要模块以及测试工具模块名：pyserial使用命令下载：python -m pip install pyserial串口调试工具：ss
- 增加字段alter table docdsp add dspcode char(200)删除字段ALTER TABLE tabl
- 这段代码用到vuejs和vue-resouece。实现对接智能提示接口，并通过上下键选择提示项，按enter进行搜索<!DOCTYPE
- 这篇文章主要介绍了在SQL Server中处理空值时所涉及的3个问题：计数、使用空表值以及外键处理。用COUNT(*)处理空值大多数集合函数
- 1.不转意html entities 一个基本的常识：所有不可信任的输入（特别是用户从form中提交的数据） ，输出之前都要转意。 echo
- 本文实例总结了python格式化字符串的方法，分享给大家供大家参考。具体分析如下：将python字符串格式化方法以例子的形式表述如下：* 定
- 为什么会讲 MRO？在讲多继承的时候，有讲到， 当继承的多个父类拥有同名属性、方法，子类对象调用该属性、方法时会调用哪个父类的属性、方法呢？
- 目的测试一个对象是否是字符串方法Python的字符串的基类是basestring，包括了str和unicode类型。一般可以采用以下方法：d
- 全局作用域下this;当在全局作用域中使用 this,它指向全局对象。这里详细介绍下全局对象：全局对象(Global object) 是在进
- 概述相信我们经常会遇到这样的场景：想要了解双十一天猫购买化妆品的人员中平均消费额度是多少（这可能有利于对商品价格区间的定位）；或者不同年龄段
- 需 求 分 析 1、读取指定目录下的所有文件2、读取指定文件，输出文件内容3、创建一个文件并保存到指定目录实 现 过 程Python写代码简
- 全局事件总线，是组件间的一种通信方式，适用于任何组件间通信。看下面具体的例子。父组件：App<template>
- 一、死锁简单来说，死锁是一个资源被多次调用，而多次调用方都未能释放该资源就会造成死锁，这里结合例子说明下两种常见的死锁情况。1、迭代死锁该情
- Numpy模块被广泛用于科学和数值计算，自然有它的强大之处，之前对于特征处理中需要进行数据列表或者矩阵拼接的时候都是自己写的函数来完成的，今
- 所谓的登录态其实就是客户端发送请求的时候携带的token(通常叫做令牌），当用户输入账号密码，验证成功之后，服务端生成一个token传递给客
- 目录背景分析数据模拟1、创建两个表：员工表和部门表2、创建两个函数：生成随机字符串和随机编号3、编写存储过程，模拟500W的员工数据4、编写
- 可以通过浏览器在访问者的硬盘上创建文件，因为我开始试了一下真的可以，不信你把下面这段代码COPY到一个HTML文件当中再运行一下！ <
