关闭

7款超酷的在线代码编辑器的实现收集(2012-05-26更新)

标签: javascriptbrowserftp服务器numbersphpdiv
34752人阅读 评论(2) 收藏 举报
分类:

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

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/


3
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:1126743次
    • 积分:11941
    • 等级:
    • 排名:第1294名
    • 原创:166篇
    • 转载:74篇
    • 译文:4篇
    • 评论:255条
    最新评论