基于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 *
- 基于Canvas元素的代码高亮编辑器Daisy Editor
- chan editor 轻量级的带语法高亮的代码编辑器
- 微软编辑器的代码高亮
- 基于Asp.Net的Ajax在线编辑器 Obout Editor
- 基于HTML5的拓扑图编辑器 - Graph.Editor
- 【代码挖掘】创建unity工程常用目录的editor编辑器
- 百度编辑器代码高亮
- Editor:实用的在线编辑器(WYSIWYG Editor)
- Daisy
- 基于 HTML5 Canvas 的简易 2D 3D 编辑器
- 微软编辑器的代码高亮 (恶心模拟)
- html5编辑器(图片编辑器基于canvas)
- 开源云端代码编辑器 ACE Editor
- canvas元素的用法
- canvas元素的基础知识
- canvas元素的总结
- mini-editor项目设计介绍(一个基于Javascript的Web编辑器)
- 基于.net技术的代码高亮显示组件
- C语言中的可变参数:va_list ,va_start,va_arg,va_end
- Spring的几种注入类型
- java socket参数详解:SoLinger
- Gerrit介绍
- 图像处理之简单数字水印 - 文字轧花效果
- 基于Canvas元素的代码高亮编辑器Daisy Editor
- Mysql源代码阅读笔记(三) 重要的宏
- 整理中。。。
- mongo db 使用方法
- HostMonitor
- HOJ Megaminx
- 解读HTTP包 .
- 如何用C#将visio文档中的动态连接线设置为直线
- android下拉抽屉