基于Canvas元素的代码高亮编辑器Daisy Editor

来源:互联网 发布:小皇帝奇遇记 知乎 编辑:程序博客网 时间:2024/05/02 05:07

这段时间写了个基于canvas的代码高亮编辑器,差不多相当于是一个简单的Scintilla(http://www.scintilla.org/, notepad++的内核).

在这里可以看在线的演示:http://yuhanghome.net/daisy-editor/  便宜空间,网速不给力,加载有点慢,大家见谅。

在这里可以在GitHub上关注这个项目:https://github.com/YuhangGe/daisy-editor


项目的由来是,之前看到很多用来挂博客的空间都提供了简单的代码编辑器,还有一些云计算平台提供的在线ide也会用到前端代码高亮编辑器。但目前这种带高亮的前端代码编辑器很少,而且基于dom元素,性能都不高。

Daisy Editor 支持海量文本编辑(几万行以上没有问题)、词法分析器可以支持各种语言的高亮、各种颜色主题可配置(目前只演示了JS的高亮和借用的Aptana的主题)

但由于还是一个最基本的原型,目前存在以下问题:
* 1、在Chrome下开启中文输入还有问题。
* 2、在Chrome下选中文字的时候越出编辑区不能自动滚动(Chrome下没有setCapture函数)
* 3、IE9下面鼠标点击后的光标位置错误。(但使用键盘移动光标全部正确)
* 4、目前还没有实现删除选中文字的功能(囧,这个是最基本的吧,正在努力中……)
* 5、当编辑海量文本(比如加载jquery1.5.1的源码)时,由于词法分析的不可避免耗时,会略显小卡。
*   在chrome下最流畅、ie9和firefox次之

*   据观察(额,是观察~~),在Aptana下,高亮的词法分析应该是多线程的实现,
*   我已经使用了setTimeout来模拟,取得了一定效果,但很显然这是伪多线程,所以还是会卡。正在考虑使用js的Worker对象模拟。
* 6、显示行号、自动换行、复制、粘贴以及其它对外接口功能正在努力中~~~

* 7、好像词法器还有的地方分析不正确。

或许还有更多bug……

断断续续开发了差不多一个多月了,遇到各种问题,基本都是在性能优化上。开发一个编辑几十行的代码的编辑器容易,要能编辑上万行代码的就真是有点蛋疼了。不过还好,最大的一些问题都解决了。

在csdn上发出来,想看看有没有人关注这个东西,也不知道这个东西的应用场景多不,开发得有点累了.

希望这贴不要匿了……

 

 

 

@website     http://yuhanghome.net

@address     software institute, Nanjing University

@email       abraham1@163.com | abeyuhang@gmail.com 

@weibo       http://weibo.com/abeyuhang *

原创粉丝点击