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

这段时间写了个基于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 *

最后

以上就是独特鱼为你收集整理的基于Canvas元素的代码高亮编辑器Daisy Editor的全部内容，希望文章能够帮你解决基于Canvas元素的代码高亮编辑器Daisy Editor所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。