超酷的在线代码编辑器的实现收集

先列出本文收集的所有代码编辑器，后面一一介绍。

Bespin

Ace

Codepress

Ecoder

EditArea

CodeAnyWhere

CodeMirror

在线代码编辑器
    在线编辑各种文本形式的源代码，如js,html,php等，要支持语法高亮，即时输入即时高亮。

我的初步想法是用一个<div contenteditable></div>来实现，就是类似于常见的在线网页编辑器，但是因为仅仅是需要代码编辑，所以，要控制只能输入文本，不能让用户插入图片啊链接啊等等东西，感觉比较难。

希望大家能够探讨一下如何实现。

Bespin是一个用Canvas实现的在线代码编辑器，所以不支持IE，而且，因为是Canvas模拟编辑，效率很低，反应迟钝。
https://bespin.mozilla.com/   该网址作废，见后文说明。
Bespin有一个最独特之处是它竟然是完全用Canvas来实现的，也就是说，所有的高亮代码，都是画在canvas上的，效率并不是特别高，但是方法很别致，目前还没见到第二个这样实现的编辑器。

2012-05-26更新：Bespin已经是过去式了，Mozilla一度将该项目并入Skywriter，但Skywriter项目也关闭了，其网站上仅仅是推荐了2个东西：一个就是Ace高亮代码编辑器，另一个是Cloud9 IDE，基于Ace开发的一个云IDE提供在线的编程和保存。 在ace的网站上，有一段英文介绍了Bespin, SkyWriter, Ace之间的渊源，刚开始，Bespin和SkyWriter是各自独立的项目，Bespin走Canvas线路，SkyWriter走DOM线路，而Ace是Cloud9 IDE的编辑器组件。后来SkyWriter团队将Ace合并到SkyWriter项目，再后来又反过来都合并到Ace并完全取代了SkyWriter，现在就只有Ace了，Ace由Ajax.org和Mozilla共同开发和维护。

因为Bespin被废弃，现在要想获取Bespin的代码还比较困难，从github找到了两个链接，但是这里面可能不是最后的版本：

https://github.com/bespin/bespin

https://github.com/mozilla/bespinclient

Ace Editor

http://ace.ajax.org/

https://github.com/ajaxorg/ace

看起来很不错，有个很NB的网站Play My Code(playmycode.com)采用了这个编辑器。

Cloud9 IDE，起名者大概借用成语“九霄云外”吧？

https://github.com/ajaxorg/cloud9

http://c9.io/

cloud9 ide的编辑器是Ace Editor内核。

Sky-Edit也是采用Ace Editor内核，用法很特别，看截图的地址栏。截图：

http://documentup.com/gozala/sky-edit

------------------------------------------------------------------------------------------------------------------
问题补充：

kjah 写道

以前做过这方面预研,可以参考下我预研报告:
http://kjah.javaeye.com/blog/424624
记得实现比较好的是 codepress
js干这活效率上差很多,由于这个原因实际项目中没有采用js,还是用的ActiveX

看了你的文章。感觉codepress就是我所需要的。
但我这里访问不了 http://codepress.org/
用这个网址就可以了 http://codepress.sourceforge.net/

codepress截图：

------------------------------------------------------------------------------------------------------------------
问题补充：
查找旧文档，发现以前就找到过一个和我需要的功能基本一致的程序。
Ecoder，这个也是在sourceforge开源的，我的csdn博客之前还有记录过，没想到竟忘记了。

很赞的在线的代码编辑器，支持多种语言彩色语法编辑，罕见精品
http://blog.csdn.net/cuixiping/archive/2009/10/16/4678840.aspx

网址：
http://ecoder.gmeditor.com/
http://sourceforge.net/projects/ecoder/

我看了看，它的实现原理是用一个透明的<textarea>做编辑区，在<textarea>底下用一个<div>来放彩色高亮代码，比较巧妙的解决了<textarea>便于输入却不便于着色、而<div>便于着色却不便于输入的矛盾。
但是有一点点问题，字体会有重影，因为div里的字和textarea里的字并非总能完全重合的，选中一段代码时更明显。

------------------------------------------------------------------------------------------------------------------
问题补充：
补充一个处理高亮的js库：
SyntaxHighlighter
http://alexgorbatchev.com/SyntaxHighlighter/

https://github.com/alexgorbatchev/SyntaxHighlighter
http://code.google.com/p/syntaxhighlighter/
SyntaxHighlighter是一个利用Javascript和CSS在客户端高亮显示代码的小工具，用法非常简单，引入相应的CSS和JS文件，然后将代码放到一个TextArea....

------------------------------------------------------------------------------------------------------------------
问题补充：
再补充一个在javaeye发现的强大的js语法高亮库：JSSC

JSSC 3 rc（js语法高亮器 ver3 rc）&& JSSC 2.2 发布:
http://www.javaeye.com/topic/189502

时隔很久了，JSSC4 beta版终于亮相……
http://www.javaeye.com/topic/291314

jssc ver5.0 alpha
http://www.javaeye.com/topic/459788

关于jssc的项目主页以及之前的老版本或者想使用它的，请看这里：

http://code.google.com/p/jssc/
http://jssc.googlecode.com/

------------------------------------------------------------------------------------------------------------------
问题补充：

kjah 写道

又找到一个更好的:editArea
http://www.open-open.com/ajax/ajax20080713173520.htm
试用了一下感觉不错
果然强大，你怎么找到的啊？

不过这个示例网址我这里打不开，去sourceforge看看。

EditArea
EditArea是一个javascript源代码编辑器。支持：文本格式化，搜索与替换，实时语法着色加亮。当前支持的语言包括：PHP、CSS、Javascript、Python、HTML、XML、VB、C、CPP、SQL、Pascal、Basic、Brainf*ck。
主页:http://www.cdolivet.com/editarea/
下载:http://sourceforge.net/project/showfiles.php?group_id=164008
示例:http://www.cdolivet.com/editarea/editarea/exemples/exemple_full.html

------------------------------------------------------------------------------------------------------------------
问题补充：
另外发现了一款在线编辑php的，名叫phpAnyWhere，看介绍应该是很强大的，但是由于必须要先有ftp服务器账号，而我填好真实有效的ftp后还是一直提示“Unable to connect to server!”郁闷，也就没能进到里面的编辑界面了。
CodeAnyWhere (原名phpAnyWhere)
网址：http://phpanywhere.net/

https://codeanywhere.net/

是一个在线的PHP开发环境，能够实时编辑和语法高亮PHP,HTML,JS,CSS等web格式文件，并且它是直接连接到你的FTP服务器的，保存时更新到FTP服务器。

支持语法高亮、智能缩进、代码折叠、代码智能提示等功能，在各种在线编辑器里算是比较完善的一个。

------------------------------------------------------------------------------------------------------------------
问题补充：
kjah 提到的这个editarea （http://sourceforge.net/projects/editarea/）
和 gmeditor ecoder（http://sourceforge.net/projects/ecoder/）比较相似了，都是通过透明textarea遮盖div来实现效果。

 

------------------------------------------------------------------------------------------------------------------
再补充：
下面两个帖子里的实现也值得看看：

在线代码编辑器（原型）  http://www.javaeye.com/topic/727718

javascript开发css语法提示(CodeHints)功能    http://kjah.javaeye.com/blog/427291

 

根据上面帖子中一位朋友提到的CodeMirror，找到了它

CodeMirror     这个灰长推荐啊！

CodeMirror可以说是大名鼎鼎，这是一个比较成熟的实现了，支持几十种编程语言的在线编辑，支持所有主流的浏览器。

支持自动完成、代码折叠、HTML预览、全屏、代码格式化、Mustache模板高亮等，并且其更新相当活跃。

有一篇分析codemirror原理的文章写的不错，中文的：CodeMirror代码加亮原理

http://codemirror.net/