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 be When I was dreaming about you baby You 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>
 提示：您可以先修改部分代码再运行

[ 本帖最后由 mozart0 于 2006-9-5 22:22 编辑 ]

嘿嘿，问题多多，但确实很牛～

还没时间细看，先给打个分。大家一起来提提意见～

居然置顶了

我会随时更新
将来可能把它做成一个多功能并且可自由扩展的代码编辑器

——不过过几天就要放假了，得回家讨老婆去
大家不仅可以提意见，有兴趣还可以自己去实现它，然后贴出来大家交流

很不错...你们说呢!!

我可找到了,如果做成动态的在线编辑器就好了.

建议最好能增加关键字加亮加粗，呵呵

不俗,分析代码构成
dw8并不支持分析,纯粹的想折多少折多少
这个应该说是仿vs之类的程序编辑器.
努力优化.hoho

真得很好啊

to hbjswj:
  在线编辑器大致就是可以上存到服务器吧，提交的时候来个oTxt.value=oTxt.trueValue()就ok了，后台程序自不必在这儿说。

to Fove:
  我在上面用词有点夸张。程序并没真的分析代码，它不过是一行行地看，满足什么条件前面就显示什么图片而已。你在里面装的代码结构好，而且没有撞上它的盲点，自然就好像它在智能分析了。但是真的让它去智能分析，这事也挺有意思的，我正准备看编译原理。

to lapuasi:
  语法高亮难在textarea本来只爱显示单色无格式文字。用别的什么代替textarea，感觉总不像那么回事。刚才想到一个办法，让textarea的文本透明，在它下面放上一些不同的色块，应该可行，实现起来可能还会有一些麻烦。慢慢来吧，但总之这个功能是决心做了。谁做过语法高亮，给点建议。

我目前收集了两种js代码高亮的方法，放在公司的机器上，家里没有，我的站上试用了其中一种的效果，如：
http://www.sheneyan.com/g.php/te ... ript/calctable.html

这是它自带的演示代码：
http://www.sheneyan.com/html/js/syntax/Tests.html
明天我把两个代码都打包供下载，给你看看吧



--------------------
2005.12.28更新：
http://share.sheneyan.com/tmp/highlight.zip
两个都有，mozart0,你看看吧

厲害

如果支持FireFox和代码高亮显示 那就大大的好咯!

真是太漂亮了,我找了好长时间了,终于找到了
不错不错!!

果然是不错的

呵呵，不错的东东哦！

帅呆~~

哈哈，有意思

在博客园中看到有人发那种带折叠的和关键字加亮的文章,相必那个网站使用的后台中可以实现,但是那个网站又不让随便注册使用,请问这里的朋友哪个在那上面有博客,把它的编辑器弄一个下来给大家用用啊`~~~~谢谢了,我找了很久都没有找到~~~~

收藏了！！！！！

还有一点，增加行号，呵呵

继续努力！

不要着急,这个东西已经有人写成.NET的控件了,非常方便,感谢博客园的dudu提供地址:

http://www.actiprosoftware.com/P ... hter/PasteCode.aspx

这是在线版,你也可以下载免费的.NET控件,以后可以做到自己的程序里面去.主要是正则的应用,开发文档也很全,学习ing~~~~~(下载地址会通过邮件发到你提供的邮箱里面)

强！

好哇！继续做……
参考一下这个：
http://www.actiprosoftware.com/Download/DotNet/Files/CodeHighlighter.zip

支持楼主!
最好能运行代码,查看最终效果就好啦!

测试blug！！！！

在中间行有代码收缩的时候按退格键会出现错误！

厉害！

容错性比较不理想
不能区分{}和<script></script>，如果中间漏掉了一个"{"或者"}"
则会出现吧</script>以后的内容也归到script中

另外最好再弄点加载文档之类的东东，既然是仿，就仿的更像点哈，我已经有办法智能判断加载文件的编码格式，我们一起努力，争取早点做一个中文不会出现乱码的编辑器吧，相关资料，请参考
http://bbs.blueidea.com/viewthread.php?tid=2399544

用在WEBEDIT里就强了。

很不错,我支持了哦~~~