Ace-Editor 上手及调用方法

因为最近一个项目的需要，需要一个网页端的代码显示，可编辑，高亮，显行，方便跳转等功能。试着想了想怎么写，越想越麻烦，本着不重复造轮子的想法，找到了C9 在线编辑器的base 版，也就是这个Ace-Editor, Ace-Editor 功能很强大，我配置使用了一下，能够满足各种需求了。

上手

主页：Ace-editor
Github: ace-builds

clone 下builds 文件，这些已经是generated files 了，如果要进一步了解，对编辑器本身做改造，可以访问源头ace。

使用代码编辑器很简单，下载完builds files之后，在html 文件插入如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
<head>
<title>ACE in Action</title>
<style type="text/css" media="screen">
    #editor { 
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
</style>
</head>
<body>
<div id="editor">function foo(items) {
    var x = "All this is syntax highlighted";
    return x;
}</div>
    
<script src="/ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
    var editor = ace.edit("editor");
    editor.setTheme("ace/theme/monokai");
    document.getElementById('editor').style.fontSize='12px';
    editor.getSession().setMode("ace/mode/javascript");
</script>
</body>
</html>

其中只需要引入工程文件下的ace.js， 然后将编辑器div 用edit 绑定成一个编辑器，后边的诸多功能，都是从这个对象开始的。上边的例子中，指定了主题，设置了语言模式。ace 支持百种语言模式。

一些最初操作，如设置主题，以及语言模式，如上例子，直接用获得的对象调用，setTheme, getSession().setMode()，以及利用DOM 操作来制定字体大小。
所以，一个常规的注册过程应当是这样的：

1
2
var editor = ace.edit("xxx");
var session = editor.getSession();

实际上，这一块有一些API 搞得不是很清晰，有些函数是在editor 上操作，有些是在session上操作的，有些是editor 和session 都可以。所以一个良好的办法就是开始初始化的时候把两个都先初始化。

常用操作

设置和获取代码区内的代码，这是我的项目里要用的比较多的操作，因为涉及到频繁的文件跳转，读取和写入操作。他的使用非常简单。

1
2
editor.setValue("the new text here"); // or session.setValue
editor.getValue(); // or session.getValue

此处editor 和 session 都是可以的，建议直接使用editor。

获取选中的范围，做片段代码检测和替换的时候，可能会用到这个api,不需要指定参数，就根据代码区选中的代码部分，做操作就可以了。

1
editor.session.getTextRange(editor.getSelectionRange());

在光标处插入字符串：

1
editor.insert("Something cool");

获取当前光标所在的行和列，定义一个函数，监听代码区内的鼠标点击操作，然后获取行列，这个用处较多。

1
editor.selection.getCursor();

定位到某一行，配合上一个使用，可以实现两个编辑器的同步跳转操作，以此方法，也可以实现markDown 编辑器的制作了。

1
editor.gotoLine(lineNumber);

只读文本，两块代码区，有一块是只读的，所以将该设置定位true.

1
editor.setReadOnly(true);

搜索功能，可以给搜索定制比较多的参数，然后实现替换等功能。

1
2
3
4
5
6
7
8
9
editor.find('needle',{
    backwards: false,
    wrap: false,
    caseSensitive: false,
    wholeWord: false,
    regExp: false
});
editor.findNext();
editor.findPrevious();

其中可以指定的参数：

然后使用，find,replace,relaceall ，就可以做替换了。

监听代码区的变化，这个是重要的功能，省去了一些自己写监听函数的功夫，一般来说，ace 中的监听函数都形式如下：

1
object.on("change" function(e){});

最常用的监听会话的变化，进一步来讲就是监听当前光标的变化，选择的内容的变化等。

1
2
3
4
5
6
7
8
9
10
editor.getSession().on('change', function(e) {
    // e.type, etc
    // To listen for an onchange:
});
editor.getSession().selection.on('changeSelection', function(e) {
    // To listen for an selection change:
});
editor.getSession().selection.on('changeCursor', function(e) {
    // To listen for a cursor change:
});

绑定快捷键操作，这个算是功能完善之后的小功能点了

1
2
3
4
5
6
7
8
editor.commands.addCommand({
    name: 'myCommand',
    bindKey: {win: 'Ctrl-M',  mac: 'Command-M'},
    exec: function(editor) {
        //...
    },
    readOnly: true // false if this command should not apply in readOnly mode
});

更多功能

ace 作为一个在线编辑器的底层模板，实现了非常多的底层功能，报错词法分析，分词器都做到了，在此基础之上，还可以制作自己的语法高亮系统，以及语法处理，依托这个功能，还可以实现自己的Markdown编辑器。不过，我现在要做的功能不是实现一个markdown编辑器，所以这一部分功能不涉及。

另外，在Document 里可以查到他的API Reference， 总共可以分为以下这些类别，需要的时候，可以查阅文档：

可以拿来做什么

在ace-editor 的基础上实现的C9 在线IDE非常强大，实现了一个IDE 应该有的全部功能，这也当是ace 的强大所在。

ace 可以用来做一个Markdown编辑器，现在做这个不麻烦，主要是不能有bug，网上可以找到一些已有的语法分析方案，然后可以实现一套自己的方案。进一步的话，麻烦一些的就是实现一个自己的文件夹系统，来管理文件。

我现在使用它要做的功能，是两个代码编辑框，从一个代码编辑框中任意位置，会根据代码中的内容，定位到另一个文件中的位置。关键的技术问题就是后台实现一个文件管理的功能，前端能够读取光标所在行，分析所在行标记的另一个文件的路径和文件中的位置，并在另一个代码编辑框中显示，并定位到该行。

再下一步是要能够对代码某一个range，做替换操作。替换完成后，还应当能够确保本地得以修改。

script>