在线代码编辑器——ace editor

本文主要介绍应用在我们项目中的一款开源在线代码编辑器的使用情况。

一,集成进项目。

公司的项目是一个基于echart的大数据可视化分析平台,在某些场景下,用户需要手动去编写一些javascript脚本来实现自定义的功能,因此需要引入一个在线代码编辑器。之前用的是code mirror,但是因为样式不美观,bug多,我将其更换成了两一个开源编辑器:ace editor。下面是独立的demo效果图。

在线代码编辑器——ace editor_第1张图片
效果图


使用方法:

1,去该项目的github页面下载压缩包解压。得到ace-builds-master文件夹。

2,在页面预备一个html容器,添加上图中的js初始化和简易配置代码,容器被定位后会调用相关的方法加载编辑器。

更多的资料可以参阅官方的api文档。

二,bug修复。

大概一年以后,项目在使用过程中出现了中文输入的bug,影响了用户体验。经过排查,发现是chrome浏览器更新的bug所导致。

最后通过更新ace-builds-master下的src-noconflict文件夹来修复。

官方的更新日志也证实了这一点:

2016.12.03 Version 1.2.6

* Fixed IME handling on new Chrome

* Support for php 7 in the syntax checker

2016.08.16 Version 1.2.5

* Fixed regression in noconflict mode

2016.07.27 Version 1.2.4

* Maintenance release with several new modes and small bugfixes

2016.01.17 Version 1.2.3


以上

你可能感兴趣的:(在线代码编辑器——ace editor)