仿DW8代码折叠的HTML编辑器仿DW8代码折叠的HTML编辑器2006-8-11 21:57:35仿DW8代码折叠的HTML编辑器2006-8-11 21:57:35仿DW8代码折叠的HTML编辑器

测试版（仅支持ie5.5+，且一个页面里只能放一个）
收集意见

功能：
1.动态分析，智能折叠，ctrl+Enter强制重建
2.tab键输出两个空格(若选区为多行，各行前加入两空格，同时按shift键反之)，Ctrl+T替换\t为俩空格
3.回车自动缩进
4.Ctrl+W预览

限制：
1.取消了右键菜单(复制剪切粘贴可使用键盘)
2.暂不支持文本拖放
3.Ctrl+Z将撤销所有操作
4.块起止测试并不严格，且未考虑vbscript
5.运行效率有待改进

运行代码框
<style> body{ text-align:center; } #oTxt,#oBox{ height:440px; border:none; border:1px solid #666666; } #oTxt{ width:740px; color:#333333; background-color:#f0f0f0; font-family:verdana; font-size:11px; line-height:13px; margin-left:16px; overflow:auto; border-left:none; scrollbar-arrow-color:#666666; scrollbar-base-color:#666666; scrollbar-darkshadow-color:#f0f0f0; scrollbar-face-color:#f0f0f0; } #oBox{ position:absolute; width:15px; overflow-y:hidden; background-color:#e0e0e0; padding-top:1px; margin-top:1px; padding-bottom:19px; border-right:none; } </style> <script> /* 测试版（仅支持ie5.5+，且一个页面里只能放一个） 收集意见 功能： 1.动态分析，智能折叠，ctrl+Enter强制重建 2.tab键输出两个空格(若选区为多行，各行前加入两空格，同时按shift键反之)，Ctrl+T替换\t为俩空格 3.回车自动缩进 4.Ctrl+W预览 限制： 1.取消了右键菜单(复制剪切粘贴可使用键盘) 2.暂不支持文本拖放 3.Ctrl+Z将撤销所有操作 4.块起止测试并不严格，且未考虑vbscript 5.运行效率有待改进 */ window.onload=function(){ oBox.mLine="http://free.txd.cn/mozart0/img/line.gif"; oBox.mPlus="http://free.txd.cn/mozart0/img/plus.gif"; oBox.mMinus="http://free.txd.cn/mozart0/img/minus.gif"; oBox.mEnd="http://free.txd.cn/mozart0/img/end.gif"; oBox.isPlus=function(o){ return /plus\./.test(o.src); } oBox.isMinus=function(o){ return /minus\./.test(o.src); } oBox.isLine=function(o){ return /line\./.test(o.src); } oBox.isEnd=function(o){ return /end\./.test(o.src); } oBox.childrenVisible=function(index){ var t=this.children[index]; while(t.style.display=="none") t=t.nextSibling; var x=t.offsetTop/t.height; while(x<index){ t=t.nextSibling; if(t.style.display!="none") x++; } return t; } oBox.hideBlock=function(index){ var n=1,x=1; var c=this.children; c[index].src=this.mPlus; while(++index<c.length&&n){ var t=c[index]; if(t.style.display!="none"){ x++; t.style.display="none"; } if(this.isEnd(t)) n--; else if(!this.isLine(t)) n++; } return x; } oBox.showBlock=function(index,b){ var index0=index,c=oBox.children; c[index].src=b?this.mMinus:this.mPlus; c[index].style.display="block"; index++; if(b) while(index<c.length){ var t=c[index]; if(this.isLine(t)){ t.style.display="block"; index++; } else if(this.isEnd(t)){ t.style.display="block"; break; } else index+=this.showBlock(index,this.isMinus(t)) } else{ var n=1; while(index<c.length){ var t=c[index]; t.style.display=="none"; if(this.isEnd(t)){ if(--n==0) break; } else if(!this.isLine(t)) n++; index++; } } return index-index0+1; } oBox.refresh=function(o,str){ o.src=this.judge(str); o.storeText=str; } oBox.judge=function(s){ var l=/\{/.test(s),r=/\}/.test(s); if(l&&!r) return this.mMinus; if(!l&&r) return this.mEnd; s=s.replace(/<(\w+).*<\/\1>/g,"<$1/>"); l=/^\s*<\w+[^\/]+[>\r]/.test(s); r=/\/>/.test(s); if(l&&!r) return this.mMinus; r=/<\/\w+>/.test(s); if(r) return this.mEnd; return this.mLine; } oBox.onclick=function(){ var o=event.srcElement; if(o==this) return; var vIndex=(o.offsetTop-1)/oTxt.lineHeight; var index=vIndex; var t=this.children[vIndex]; while(t!=o){ t=t.nextSibling; index++; } if(this.isMinus(o)) oTxt.hideLines(vIndex,this.hideBlock(index)); else if(this.isPlus(o)) oTxt.showLines(vIndex,this.showBlock(index,true)); oBox.scrollTop=oTxt.scrollTop; } oTxt.lineHeight=13; oTxt.strSpecial="......"; oTxt.regSpecial=/\.{6}\r?$/; oTxt.strTab=" "; oTxt.bFixed=false; oTxt.originalValue=oTxt.value; oTxt.trueValue=function(){ for(var s="",c=oBox.children,i=0;i<c.length-1;i++) s+=c[i].storeText+"\n"; return s+c[i].storeText; } oTxt.lineNumber=function(r){ var t=this.createTextRange(); return Math.round((r.boundingTop-t.boundingTop)/this.lineHeight); } oTxt.rngAtHome=function(r){ var t=this.createTextRange(); return r.boundingLeft==t.boundingLeft&&r.boundingTop==t.boundingTop; } oTxt.rngAtEnd=function(r){ var t=this.createTextRange(); t.collapse(false); return r.boundingLeft==t.boundingLeft&&r.boundingTop==t.boundingTop; } oTxt.hideLines=function(ifrom,n){ var a=this.value.match(/.+/mg); for(var i=1;i<n;i++) a[ifrom+i]=""; a[ifrom]=a[ifrom].replace(/\r/,this.strSpecial); if(ifrom+n<a.length) a[ifrom]+="\r"; this.value=a.join(""); } oTxt.showLines=function(ifrom,n){ var a=this.value.match(/.+/mg); var t=oBox.childrenVisible(ifrom).nextSibling; for(var s="",i=0;t&&i<n-1;i++,t=t.nextSibling) if(t.style.display!="none"){ if(!oBox.isPlus(t)) s+=t.storeText; else s+=t.storeText.replace(/\r?$/,this.strSpecial+"\r"); } a[ifrom]=a[ifrom].replace(this.regSpecial,"\r"+s); this.value=a.join(""); } oTxt.ondrag= oTxt.ondrop= oTxt.oncontextmenu=function(){ return false; } oTxt.onscroll=function(){ oBox.scrollTop=this.scrollTop; } oTxt.onkeydown=function(){ if(event.keyCode>=33&&event.keyCode<=40) return true; var r=document.selection.createRange(); var t=oBox.childrenVisible(this.lineNumber(r)); if(!r.text){ if(oBox.isPlus(t)) return false; } else{ var n=Math.floor(r.boundingHeight/this.lineHeight); for(var i=0,t1=t.nextSibling;i<n&&t1;i++,t1=t1.nextSibling) if(t1.style.display=="none") return false; } this.bFixed=false; var k=event.keyCode; if(k==9){ //Tab var r1=r.duplicate(); if(r.boundingHeight>this.lineHeight){ if(!event.shiftKey){ r.text=r.text.replace(/^(.)/mg,this.strTab+"$1"); for(var i=0,t1=t;i<n;i++,t1=t1.nextSibling) t1.storeText=this.strTab+t1.storeText; } else{ var reg=new RegExp("^"+this.strTab,"mg"); r.text=r.text.replace(reg,""); for(var i=0,t1=t;i<n;i++,t1=t1.nextSibling) t1.storeText=t1.storeText.replace(reg,""); } r.setEndPoint("StartToStart",r1) r.select(); this.bFixed=true; } else fix(r,this.strTab); return false } if(k==13){ //Enter if(event.ctrlKey) build(); else{ var r1=r.duplicate(); var x=this.createTextRange(); this.scrollLeft=0; r1.moveToPoint(x.offsetLeft,r.offsetTop); r1.setEndPoint("EndToStart",r); fix(r,"\r\n"+r1.text.replace(/\S.*/,"")); } return false; } if(k==46){ //Del if(!r.boundingWidth){ if(this.rngAtEnd(r)){ this.bfixed=true; return; } r.moveEnd("character",1); } fix(r,""); return false; } if(k==8){ //BackSpace if(!r.boundingWidth){ if(this.rngAtHome(r)){ this.bfixed=true; return true; } r.moveStart("character",-1); } fix(r,""); return false; } if(k==87){ //ctrl+W if(!event.ctrlKey) return true; try{ this.win.navigate("about:blank"); } catch(e){ this.win=window.open("about:blank"); } this.win.document.write(this.trueValue()); this.win.focus(); this.win.document.close(); return false; } if(k==84){ //Ctrl+T if(!event.ctrlKey) return true; this.value=this.value.replace(/\t/g,this.strTab); for(var i=0,c=oBox.children;i<c.length;i++) c[i].storeText=c[i].storeText.replace(/\t/g,this.strTab); oTxt.bFixed=true; return false; } if(k==86){ //Ctrl+V if(!event.ctrlKey) return true; fix(r,clipboardData.getData("text")); return false; } if(k==88){ //Ctrl+X if(!event.ctrlKey||!r.boundingWidth) return true; var s=r.text; if(!s) for(var i=0,n=Math.floor(r.boundingHeight/this.lineHeight);i<n;i++) s+="\r\n"; else{ var r1=r.duplicate(); r1.moveEnd("character",1); if(r.text==r1.text&&r.boundingTop==r1.boundingTop) s+="\r\n"; } clipboardData.setData("text",s); fix(r,""); return false; } if(k==90){ //Ctrl+Z if(!event.ctrlKey) return true; this.value=this.originalValue; build(); return false; } return true; } oTxt.onkeyup=function(){ if(this.bFixed) return; var k=event.keyCode; if(k==32||k>=48&&k<=111||k>=186&&k<=192||k>=219&&k<=222){ var n=this.lineNumber(document.selection.createRange()); oBox.refresh(oBox.childrenVisible(n),this.value.split("\n")[n]); } } function fix(rng,str){ oTxt.bFixed=true; var t0=oTxt.lineNumber(rng); var t1=t0+Math.floor(rng.boundingHeight/oTxt.lineHeight); rng.text=str; rng.select(); var t2=oTxt.lineNumber(rng)+1; var a=oTxt.value.split("\n"); var o=oBox.childrenVisible(t0); if(t1<=t2){ for(i=t0;i<t1;i++,o=o.nextSibling) oBox.refresh(o,a[i]); for(i=t2-1;i>=t1;i--) oBox.refresh(o=oBox.insertBefore(new Image(),o),a[i]); } else{ for(i=t0;i<t2;i++,o=o.nextSibling) oBox.refresh(o,a[i]); for(;i<t1;i++){ var next=o.nextSibling; oBox.removeChild(o); o=next; } } while(a.length<oBox.children.length){ var next=o.nextSibling; oBox.removeChild(o); o=next; } oBox.scrollTop=oTxt.scrollTop; } function build(){ oBox.innerHTML=""; if(!oTxt.value) return; var a=oTxt.value.split("\n"); for(var i=0;i<a.length;i++) oBox.refresh(oBox.appendChild(new Image()),a[i]); oTxt.bFixed=true; } build(); } </script> <div id=oBox></div> <textarea id=oTxt wrap=off><script> function fix(rng,str){ oTxt.bFixed=true; var t0=oTxt.lineNumber(rng); var t1=t0+Math.floor(rng.boundingHeight/oTxt.lineHeight); rng.text=str; rng.select(); var t2=oTxt.lineNumber(rng)+1; var a=oTxt.value.split("\n"); var o=oBox.childrenVisible(t0); if(t1<=t2){ for(i=t0;i<t1;i++,o=o.nextSibling) oBox.refresh(o,a[i]); for(i=t2-1;i>=t1;i--) oBox.refresh(o=oBox.insertBefore(new Image(),o),a[i]); } else{ for(i=t0;i<t2;i++,o=o.nextSibling) oBox.refresh(o,a[i]); for(;i<t1;i++){ var next=o.nextSibling; oBox.removeChild(o); o=next; } } while(a.length<oBox.children.length){ var next=o.nextSibling; oBox.removeChild(o); o=next; } oBox.scrollTop=oTxt.scrollTop; } function build(){ oBox.innerHTML=""; if(!oTxt.value) return; var a=oTxt.value.split("\n"); for(var i=0;i<a.length;i++) oBox.refresh(oBox.appendChild(new Image()),a[i]); oTxt.bFixed=true; } </script> <center> <h1>Hello world</h1> <hr id="emptyTag"/> <div id="multiLineTag" style="text-align:right;font-size:11px;font-family:tahoma"> by mozart0@2005.12.26<br/> qq76239711<br/> <a href="mailto:mozart0@etang.com">mozart0@etang.com</a> </div> </center></textarea>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

原帖地址:
http://www.blueidea.com/bbs/NewsDetail.asp?id=2395282

仿DW8代码折叠的HTML编辑器仿DW8代码折叠的HTML编辑器2006-8-11 21:57:35仿DW8代码折叠的HTML编辑器2006-8-11 21:57:35仿DW8代码折叠的HTML编辑器