仿dw8代码折叠功能的HTML编辑器

ctrl+Enter:重建

ctrl+0:相当于点击当前行左方的加号或减号

ctrl+E:打开新窗口预览

ctrl+T:替换\t为两个空格

tab:输出两个空格,若选区为多行，各行前加入两空格，同时按shift键反之

enter:换行，自动缩进

语法高亮还没做成实时的，编辑之后自己按ctrl+Enter吧，内容很多的话可能要几秒钟

<style>body{  text-align:center;  }#oTxt,#oBox,#oColor{  height:320px;  width:640px;  border:1px solid #666666;  }#oTxt{  color:#0f0f0f;  filter:chroma(color="#0f0f0f");  background-color:#f0f0f0;  font-family:verdana;  font-size:11px;  line-height:13px;  margin-left:16px;  overflow:scroll;  border-left:none;  scrollbar-arrow-color:#666666;  scrollbar-base-color:#666666;  scrollbar-darkshadow-color:#f0f0f0;  scrollbar-face-color:#f0f0f0;  }#oColor{  position:absolute;  margin-top:1px;  padding-top:1px;  background-color:darkslategray;  z-index:-1;  text-align:left;  padding-left:16px;  overflow:hidden;  line-height:13px;  }#oColor div{  height:13;  width:3200;  overflow:hidden;  }#oColor .key{background-color:blue}#oColor .obj{background-color:red}#oColor .tok{background-color:black}#oColor .cmt{background-color:green}#oColor .str{background-color:blueviolet}#oColor .reg{background-color:blueviolet}#oColor .oth{background-color:brown}#oColor .htm{background-color:black}#oBox{  position:absolute;  width:15px;  overflow-y:hidden;  background-color:#e0e0e0;  padding-top:1px;  margin-top:1px;  padding-bottom:19px;  border-right:none;    }#oBox img{  width:15px;  border-width:0;  }</style><script>window.onload=function(){  oBox.mLine="http://bbs.blueidea.com/attachment.php?aid=3490";  oBox.mPlus="http://bbs.blueidea.com/attachment.php?aid=3492";  oBox.mMinus="http://bbs.blueidea.com/attachment.php?aid=3491";  oBox.mEnd="http://bbs.blueidea.com/attachment.php?aid=3489";  oBox.isPlus=function(o){    //return /plus\./.test(o.src);    return /3492$/.test(o.src);    }  oBox.isMinus=function(o){    //return /minus\./.test(o.src);    return /3491$/.test(o.src);    }  oBox.isLine=function(o){    //return /line\./.test(o.src);    return /3490$/.test(o.src);    }  oBox.isEnd=function(o){    //return /end\./.test(o.src);    return /3489$/.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.show=function(o){    o.style.display="block";    for(var i in o.company)      o.company[i].style.display="block";    }  oBox.hide=function(o){    o.style.display="none";    for(var i in o.company){      o.company[i].style.display="none";      }    }  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++;        this.hide(t);        }      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;    this.show(c[index]);    index++;    if(b)      while(index<c.length){        var t=c[index];        if(this.isLine(t)){          this.show(t);          index++;          }        else if(this.isEnd(t)){          this.show(t);          break;          }        else          index+=this.showBlock(index,this.isMinus(t));        }    else{      var n=1;      while(index<c.length){        var t=c[index];        this.hide(t);        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(o){    if(!o)      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.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.hotKey=function(r){    switch(event.keyCode){      case 13:    //ctrl+Enter        this.value=this.trueValue();        build();        break;      case 48:      case 96:    //ctrl+0        event.returnValue=false;        r.collapse(true);        var left=r.boundingLeft,top=r.boundingTop;        oBox.onclick(oBox.childrenVisible(this.lineNumber(r)));        r.moveToPoint(left,top);        r.select();        break;      case 65:        this.select();  //ctrl+A        break;      case 69:    //ctrl+E        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();        break;      case 84:    //Ctrl+T        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);        this.bFixed=true;        break;      case 86:    //Ctrl+V        event.returnValue=false;        fix(r,clipboardData.getData("text"));        break;      case 88:    //Ctrl+X        event.returnValue=false;        if(!r.boundingWidth)          break;        var s=r.text;        if(!s)          for(var i=0,n=Math.round(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,"");        break;      case 90:    //Ctrl+Z        this.value=this.originalValue;        build();        break;      }    }  oTxt.ondrag=  oTxt.ondrop=  oTxt.oncontextmenu=function(){    return false;    }  oTxt.onscroll=function(){    oColor.scrollTop=oBox.scrollTop=this.scrollTop;    oColor.scrollLeft=this.scrollLeft;    }  oTxt.onkeydown=function(){    this.bFixed=true;    var r=document.selection.createRange();    if(event.ctrlKey)      return this.hotKey(r);    if(event.keyCode>=33&&event.keyCode<=40)      return true;    var t=oBox.childrenVisible(this.lineNumber(r)),t1=t.nextSibling;    if(!r.text){      if(oBox.isPlus(t))        return false;      }    else{      var n=Math.round(r.boundingHeight/this.lineHeight);      for(var i=0;i<n&&t1;i++,t1=t1.nextSibling)        if(t1.style.display=="none")          return false;      }    this.bFixed=false;    var k=event.keyCode;    var r1=r.duplicate();    if(k==9){    //Tab      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      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      this.bFixed=true;      var x=this.createTextRange();      if(!r.boundingWidth){        r.moveEnd("character",1);        if(r1.boundingTop!=r.boundingTop)          return false;        }      r1=r.duplicate();      r1.collapse(false);      if(r1.boundingTop!=r.boundingTop&&oBox.isPlus(t.nextSibling))        return false;      fix(r,"");      return false;      }    if(k==8){    //BackSpace      this.bFixed=true;      if(!r.boundingWidth)        r.moveStart("character",-1);      if(r1.boundingTop!=r.boundingTop&&(!t.previousSibling||t.previousSibling.style.display=="none"))        return false;      fix(r,"");      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.round(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(oBox.scrollHeight>oTxt.scrollHeight+18){      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++){      var o=oBox.appendChild(new Image());      o.company=[];      oBox.refresh(o,a[i]);      }    oTxt.bFixed=true;    colorAll();    }  function colorContext(bInscr,bInstr,bIncmt,bInreg,sx){    this.inScr=bInscr?true:false;    this.inStr=bInstr?true:false;    this.inCmt=bIncmt?true:false;    this.inReg=bInreg?true:false;    this.sx=sx?sx:"";    }  function colorAll(){    if(oColor.children)      oColor.innerHTML="";    var line=oTxt.value.split("\r\n");    var iLeft=oTxt.scrollLeft,iTop=oTxt.scrollTop;    oTxt.scrollLeft=0;    oTxt.scrollTop=0;    var r=oTxt.createTextRange();    r.collapse(true);    var h=oTxt.lineHeight,left=r.boundingLeft,top=r.boundingTop-h;    var context=new colorContext();    for(var i=0;i<line.length;i++){      if(top+h>oTxt.clientHeight)        oTxt.scrollTop+=h;      else        top+=h;      r.moveToPoint(left,top);      var ol=oColor.appendChild(document.createElement("div"));      oBox.children[i].company.push(ol);      colorALine(line[i],r,ol,context);      }    oColor.appendChild(document.createElement("div"));    oColor.scrollLeft=oTxt.scrollLeft=iLeft;    oColor.scrollTop=oTxt.scrollTop=iTop;    }    function colorALine(s,r,oLine,oc){    if(!oc)      oc=getColorContext(new colorContext());    if(!oColor.arrObject){      initWord(oColor.arrKeyWord=[],        "break,delete,function,return,typeof,case,do,if,switch,var,catch,else,in,this,void,continue,false,instanceof,throw,while,debugger,finally,new,true,with,default,for,null,try");      initWord(oColor.arrObject=[],        "ActiveXObject,Array,arguments,Boolean,Date,Debug,Enumerator,Error,Function,Global,Math,Number,Object,RegExp,Regular,String,VBArray,clientInformation,clipboardData,document,event,external,history,location,navigator,screen,window");      }    var j=0;    if(!oc.inScr){      if(/^\s*<script[^>]*>\s*$/i.test(s))        oc.inScr=true;      r.moveEnd("character",s.length);      colorWord(r,"htm");      return;      }    if(/^\s*<\s*\/script>\s*$/i.test(s)){      oc.inScr=false;      r.moveEnd("character",s.length);      colorWord(r,"htm");      return;      }      for(j=0;j<s.length;j++){      r.moveEnd("character",1);      var c=s.charAt(j);      if(oc.inCmt){        if(c=="/"&&oc.sx=="*"&&s.charAt(j-1)=="*"){          oc.inCmt=false;          colorWord(r,"cmt");          }        continue;        }      if(oc.inStr){        if(c==oc.sx){          for(var bEnd=true,k=j-1;k&&s.charAt(k)=="\\";bEnd=!bEnd,k--);          if(bEnd){            oc.inStr=false;            colorWord(r,"str");            }          }        continue;        }      if(oc.inReg){        if(c==oc.sx){          for(var bEnd=true,k=j-1;k&&s.charAt(k)=="\\";bEnd=!bEnd,k--);          if(bEnd){            oc.inReg=false;            colorWord(r,"reg");            }          }        continue;        }      if(/[\w\s]/.test(c)){        r.expand("word");        r.scrollIntoView();        if(r.boundingHeight>=2*oTxt.lineHeight)          r.moveStart("character",1);        j+=r.text.length-1;        colorWord(r,"");        continue;        }      if(c=="/"){        if(/[\/\*]/.test(s.charAt(j+1))){          oc.inCmt=true;          oc.sx=s.charAt(++j);          r.moveEnd("character",1);          }        else if(/[a-zA-Z\d\)]/.test(s.charAt(j-1)))          colorWord(r,"oth");        else{          oc.inReg=true;          oc.sx=c;          }        }      else if(c=='"'||c=="'"){        oc.inStr=true;        oc.sx=c;        }      else        colorWord(r,"oth");      }    if(oc.inCmt){      if(oc.sx=="/")        oc.inCmt=false;      colorWord(r,"cmt");      }    else if(oc.inStr&&s.charAt(j-1)=="\\")      colorWord(r,"str");    function colorWord(rng,type){      var t=oLine.appendChild(document.createElement("span"));      if(!type){        var st=rng.text.replace(/\s+$/,"");        if(oColor.arrKeyWord[st])          type="key";        else if(oColor.arrObject[st])          type="obj";        else          type="tok";        }      else        while(/[ \t]/.test(s.charAt(j+1))){          rng.moveEnd("character",1);          j++;          }      t.style.width=rng.boundingWidth;      t.className=type;      r.collapse(false);      }    function initWord(arr,str){      str=str.split(",");      for(var i=0;i<str.length;i++)        arr[str[i]]=1;      }    }  function getColorContext(oc){    //实时语法着色时的上下方判断    }  build();  }</script><div id=oBox></div><div id=oColor></div><textarea id=oTxt wrap=off><script>/*Well I wonder could it beWhen I was dreaming about you babyYou were dreaming of me*/function colorAll(){  if(oColor.children)    oColor.innerHTML="";  var line=oTxt.value.split("\r\n");  var iLeft=oTxt.scrollLeft,iTop=oTxt.scrollTop;  oTxt.scrollLeft=0;  oTxt.scrollTop=0;  var r=oTxt.createTextRange();  r.collapse(true);  var h=oTxt.lineHeight,left=r.boundingLeft,top=r.boundingTop-h;  var context=new colorContext();  for(var i=0;i<line.length;i++){    if(top+h>oTxt.clientHeight)      oTxt.scrollTop+=h;    else      top+=h;    r.moveToPoint(left,top);    var ol=oColor.appendChild(document.createElement("div"));    oBox.children[i].company.push(ol);    colorALine(line[i],r,ol,context);    }  oColor.appendChild(document.createElement("div"));  oColor.scrollLeft=oTxt.scrollLeft=iLeft;  oColor.scrollTop=oTxt.scrollTop=iTop;  }function build(){  oBox.innerHTML="";  if(!oTxt.value)    return;  var a=oTxt.value.split("\n");  for(var i=0;i<a.length;i++){    var o=oBox.appendChild(new Image());    o.company=[];    oBox.refresh(o,a[i]);    }  oTxt.bFixed=true;  colorAll();  }</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>