ACE editor 在线代码编辑极其高亮

简介

ACE是一个开源的、独立的、基于浏览器的代码编辑器，可以嵌入到任何WEB页面或者JavaScript应用程序中，ACE支持超过60种语言语法高亮，并能够处理代码多达400万行的大型文档。

 

   特性

1. 代码高亮
2. 自动缩进
3. 更换主题
4. 搜索和替换支持正则表达式
5. 高亮选中
6. 代码折叠

主页： https://ace.c9.io/

项目地址：https://github.com/ajaxorg/ace

下载：ace-master

 

API

1. require("lib/ace"); ##引入
2. editor.setTheme("ace/theme/solarized_dark");##设置模板；引入theme-solarized_dark.js模板文件
3. editor.getSession().setMode("ace/mode/javascript"); ##设置程序语言模式
4. editor.setValue("the new text here");##设置内容
5. editor.getValue(); ##取值
6. editor.session.getTextRange(editor.getSelectionRange()); ##获取选择内容
7. editor.insert("Something cool"); ##在光标处插入
8. editor.selection.getCursor(); ##获取光标所在行或列
9. editor.gotoLine(lineNumber); ##跳转到行
10. editor.session.getLength(); ##获取总行数
11. editor.getSession().setTabSize(4); ##设置默认制表符的大小
12. editor.getSession().setUseSoftTabs(true); ##使用软标签.
13. document.getElementById('editor').style.fontSize='12px';  ##设置字体大小
14. editor.getSession().setUseWrapMode(true); ##设置代码折叠
15. editor.setHighlightActiveLine(false); ##设置高亮
16. editor.setShowPrintMargin(false); ##设置打印边距可见度
17. editor.setReadOnly(true); ##设置编辑器只读

搜索功能

editor.find('needle', {
    backwards: false,
    wrap: false,
    caseSensitive: false,
    wholeWord: false,
    regExp: false
});
editor.findNext();
editor.findPrevious();

//替换单个字符:
editor.find('foo');
editor.replace('bar');

//替换多个字符:
editor.replaceAll('bar');
##editor.replaceAll使用前需要先调用editor.find(‘needle’, …)

下列选项可用于您的搜索参数:
needle: 要查找的字符串或正则表达式
backwards: 是否反向搜索，默认为false
wrap: 搜索到文档底部是否回到顶端，默认为false
caseSensitive: 是否匹配大小写搜索，默认为false
wholeWord: 是否匹配整个单词搜素，默认为false
range: 搜索范围，要搜素整个文档则设置为空
regExp: 搜索内容是否是正则表达式，默认为false
start: 搜索起始位置
skipCurrent: 是否不搜索当前行，默认为false

 

事件监听

##监听改变事件:
editor.getSession().on('change', function(e) {
    // e.type, etc
});

##监听选择事件:
editor.getSession().selection.on('changeSelection', function(e) {
});

##监听光标移动:
editor.getSession().selection.on('changeCursor', function(e) {
});

 

自定义

根据自身需要自定义，我们在项目中用到的是ace editor提供的代码高亮功能，不需要进行编辑，配置如下：

editor.setHighlightActiveLine(true); ##代码高亮
editor.setReadOnly(true);  ##只读
editor.setShowPrintMargin(false);
editor.setTheme('ace/theme/solarized_dark'); ##引入模板
editor.getSession().setUseWorker(false);
editor.getSession().setUseWrapMode(true); ##支持代码折叠
editor.getSession().setMode('ace/mode/javascript'); ##设置语言模式

 

 

系统默认的代码高亮存在如下两个待优化点

ACE editor 在线代码编辑极其高亮

ACE editor 在线代码编辑极其高亮

1、代码高亮下面会出现好多的空白行，随着代码的增多，空白行也会增多

2、点击代码折叠后，代码高亮块的高度不会自适应的变化，也会出现多余的空白行

 

改进方案：

1、根据代码的行数，重新设置DOM节点的高度

originalHeight = 14 * editor.session.getLength() + 20;
## editor.session.getLength() 代码高亮的行数
## 14每一行代码的高度，依赖于font-size
## 20 padding css设置的
$newEditorWrapper.height(originalHeight);
##$newEditorWrapper   editor对应的dom节点

 

 

2、截取折叠代码点击gutterclick，埋下一个标识，在update函数里重新计算需要代码高亮的行数，重新设置DOM的高度

editor.on('gutterclick', function(e) {
  //...... 源码部分，不需要修改
  ##埋下一个标识
  e.editor.session.wrapModeFlag = true;
});

this.update = function(config) {
   ##找到this.element.style.height = config.minHeight+ px;
   ## 判断埋点
   var newHeight = config.minHeight;
        if (session.wrapModeFlag) {
            // 计算显示的个数
            var lineLength = $(this.element).children('.ace_gutter-cell').length,
                ##子节点的格式，代码也被editor解析成dom节点
                newHeight  =  (config.lineHeight * lineLength + 20 );
                ##config.lineHeight 每一行代码的高度

            session.wrapModeFlag = false;  ##reset埋点
            $(this.element).closest('.editor').height(newHeight);
            ##设置代码高亮段的高度
        }
   this.element.style.height = newHeight +'px'; ##newHeight
}

 

 

Embedding Ace

Ace can be easily embedded into any existing web page. You can either use one of pre-packaged versions of ace (just copy one of src* subdirectories somewhere into your project), or use requireJS to load contents of lib/ace as ace

 

The easiest version is simply:

<div id="editor">some text</div>
<script src="src/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
    var editor = ace.edit("editor");
</script>

 

 

With "editor" being the id of the DOM element, which should be converted to an editor. Note that this element must be explicitly sized and positioned absolute or relative for Ace to work. e.g.

#editor {
    position: absolute;
    width: 500px;
    height: 400px;
}

  

 

To change the theme simply include the Theme's JavaScript file

<script src="src/theme-twilight.js" type="text/javascript" charset="utf-8"></script>

 

 

and configure the editor to use the theme:

editor.setTheme("ace/theme/twilight");

 

 

By default the editor only supports plain text mode; many other languages are available as separate modules. After including the mode's JavaScript file:

<script src="src/mode-javascript.js" type="text/javascript" charset="utf-8"></script>

 

 

The mode can then be used like this:

var JavaScriptMode = ace.require("ace/mode/javascript").Mode;
editor.session.setMode(new JavaScriptMode());

 

 

to destroy editor use

editor.destroy();
editor.container.remove();