<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>