Ace (Ajax.org Cloud9 Editor)的使用

Ace是Ajax.org Cloud9 Editor的简称，是一款由JavaScript实现的代码编辑器。本文将提供Ace的官网地址及演示地址等，并介绍相关的各种使用方法。

官方地址：

http://ace.c9.io/

官方在线演示地址：

https://ace.c9.io/build/kitchen-sink.html

Github源码地址：

Ace的基本使用：

 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
31
32
33
34
35
36
37


<script src="/js/lib/ace-1.13.0/src-min/ace.js" type="text/javascript" charset="utf-8"></script>
<div id="typingEditor"></div>
<div id="runEditor"></div>


<script>
var typingEditor = ace.edit("typingEditor");
var runEditor = ace.edit("runEditor");

typingEditor.setTheme("ace/theme/cloud9_day");
typingEditor.session.setMode("ace/mode/json");
typingEditor.setOptions({
    fontFamily: "Consolas",
    fontSize: "11pt"
});
typingEditor.setValue('{\n' +
    '  "name": "abc",\n' +
    '  "description": "def"\n' +
    '}');
typingEditor.clearSelection();

typingEditor.getSession().on('change', function() {
    inputChanged();
});


runEditor.setTheme("ace/theme/cloud9_day");
runEditor.session.setMode("ace/mode/golang");
runEditor.setOptions({
    // fontFamily: "Consolas, \"Courier New\", monospace;",
    // fontFamily: "tahoma",
    fontSize: "11pt"
});
runEditor.session.setUseWorker(false);
runEditor.setShowPrintMargin(false);
// runEditor.setReadOnly(true);
</script>

Ace的基本操作

通过setTheme来设置主题

1

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

通过setMode来设置编辑器对应的语言模式

1

editor.session.setMode("ace/mode/markdown");

通过setFontSize可以设置编辑器内文本字体的大小

1

editor.setFontSize(11);

通过setTabSize可以设置制表符的长度

1

editor.getSession().setTabSize(4);

同时可以通过setUseSoftTabs将制表符变成对应长度的空格

1

editor.session.setUseSoftTabs(true);

如果你不想编辑，可以通过setReadOnly可以将编辑器设置为只读模式

1

editor.setReadOnly(true);

默认情况下ace编辑器中会有一道竖线标识打印的边距，可以通过setShowPrintMargin来控制其是否显示

1

editor.setShowPrintMargin(false);

Ace的编辑操作

通过getValue可以获取到编辑器中的全部数据

1

editor.getSession().getValue()

如果编辑器内有部分数据被选中，则可以通过getSelectionRange来获取选中的部分内容

1

editor.session.getTextRange(editor.getSelectionRange())

通过setValue可以给编辑器初始化数据

1
2
3
4


editor.getSession().setValue('{\n' +
            '  "name": "tool.hiofd.com",\n' +
            '  "description": "def"\n' +
            '}')

当你想往编辑器插入数据时，可以通过insert在光标处插入数据

1

editor.insert('tool.hiofd.com')

通过getLength可以获取到编辑器内数据的总行数

1

editor.session.getLength()

goLine则可以跳转到指定的行

1

editor.gotoLine(50)

通过getCursor可以获取到编辑器内光标的位置，输出结果为一个标识行和列的字典，像这样：{row:13,column:37}

1

editor.selection.getCursor()

Ace的搜索替换操作

通过find进行搜索

1
2
3
4
5
6
7


editor.find('ops-coffee', {    
    backwards: false,    
    wrap: false,    
    caseSensitive: false,    
    wholeWord: false,    
    regExp: false  
});

find后边跟了两个参数，第一个为要搜索的内容，第二个为搜索配置的字典，字典内可以配置如下一些参数

backwards: 是否反向搜索，默认为false

wrap: 搜索到文档底部是否回到顶端，默认为false

caseSensitive: 是否匹配大小写搜索，默认为false

wholeWord: 是否匹配整个单词搜素，默认为false

range: 搜索范围，要搜素整个文档则设置为空

regExp: 搜索内容是否是正则表达式，默认为false

start: 搜索起始位置

skipCurrent: 是否不搜索当前行，默认为false

通过findAll可以高亮显示全部搜索到的内容

1

editor.findAll();

findNext则可以查找下一个搜索到的内容

1

editor.findNext();

findPrevious查找上一个匹配的内容

1

editor.findPrevious();

通过replace可以对当前find查找到的字符串进行替换

1

editor.replace('tech.hiofd.com');

而通过replaceAll则可以对find查找到的所有内容替换

1

editor.replaceAll('tech.hiofd.com');

Ace的事件监听

通过change可以监听到编辑器内容的变化

1
2
3


editor.getSession().on('change', function(e) {    
    console.log('内容有变化')
});

changeSelection则可以监听到选择内容的变化

1
2
3


editor.getSession().selection.on('changeSelection', function(e) {    
    console.log('选择内容有变化')
});

连光标的变化都可以通过changeCursor监听到

1
2
3


editor.getSession().selection.on('changeCursor', function(e) {    
    console.log('监听光标的变化')
});

Ace替换textarea案例

html中的textarea有缺点，就是连最基本的换行都无法实现，所以我通常都会用ace来代替form表单中的textarea，但submit无法自动获取pre标签的数据做提交，这该如何处理呢？

一种简单的方式就是将textarea隐藏，同时创建一个ace编辑器来取代他，然后检测编辑器内数据的变化自动给填充到textarea内，完整的例子如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


<form class="form-horizontal" id="modalForm_Content" method="post" action=""> 
    <div class="form-group">   
        <label class="col-md-2 control-label"> 内容</label>    
        <div class="col-md-9">      
            <textarea class="form-control" id="form_content" name="content" rows="20"></textarea>
            <pre id="content" style="height:415px"></pre>    
        </div>  
    </div>
</form>
<script>
    editorvar editor = ace.edit("content");
    var textarea = $('textarea[name="content"]').hide();
    editor.getSession().on('change', function(){  
        textarea.val(editor.getSession().getValue());
    });
</script>

文章目录