作者：Albert.Wen 添加时间：2022-10-05 00:34:16 修改时间：2023-04-27 09:49:52 分类：HTML/CSS/JS 编辑
ACE Editor 是一个开源的、独立的、基于浏览器的代码编辑器，可以嵌入到任何 web 页面或 JavaScript 应用程序中。ACE 支持超过 110 种语言语法高亮，并能够处理代码多达 400 万行的大型文档。ACE 开发团队称，ACE 在性能和功能上可以媲美本地代码编辑器（如 Sublime Text、TextMate 和 Vim 等）
1、拷贝所需的JS文件
我是把源码目录 src-min-noconflict 中的文件，拷贝到项目目录中，如：/static/ace-editor/js
2、引用JS文件
在一般情况下，我们需要引入的js库是两个：ace.js，ext-language_tools.js
|
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
<!DOCTYPE html>
<html>
<head>
<title>Demo of ACE Editor</title>
<script src="/static/ace-editor/js/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/ace-editor/js/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<pre id="code" class="ace_editor" style="min-height:400px"><textarea class="ace_text-input">
#include <cstdio>
int main(){
int n,m;
scanf("%d %d",&n,&m);
printf("%d",n+m);
return 0;
}
</textarea></pre>
<script>
//初始化对象
editor = ace.edit("code");
//设置风格和语言（更多风格和语言，请到github上相应目录查看）
theme = "clouds"
language = "c_cpp"
editor.setTheme("ace/theme/" + theme);
editor.session.setMode("ace/mode/" + language);
//字体大小
editor.setFontSize(18);
//设置只读（true时只读，用于展示代码）
editor.setReadOnly(false);
//自动换行,设置为off关闭
editor.setOption("wrap", "free")
//启用提示菜单
ace.require("ace/ext/language_tools");
editor.setOptions({
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: true
});
</script>
</body>
</html>
|
效果图（纯本机测试，Notepad++ + Firefox）：
3、基本用法
去除中间的竖线：
|
1
|
editor.renderer.setShowGutter(false);
|
去除行号：
|
1
|
editor.setShowPrintMargin(false);
|
设置并获取内容：
|
1
2
3
|
editor.setValue("the new text here");
editor.session.setValue("the new text here");
editor.getValue();
|
设置主题：
|
1
|
editor.setTheme("ace/theme/xcode");
|
设置语言模式：
|
1
|
editor.session.setMode("ace/mode/sql");
|
启用提示菜单：
|
1
2
3
4
5
6
7
|
ace.require("ace/ext/language_tools");
editor.setOptions({
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: true
});
|
撤销：
重做回退：
光标跳转到指定行：
查找替换：
|
1
|
editor.execCommand('replace');
|
自动换行：
|
1
|
editor.setOption("wrap", "free");
|
参考：
- ACE Editor在线代码编辑器简介及使用引导
- Ace editor中文文档
- ACE编辑器ace-editor笔记
工作项目中的一次应用
模板文件：aceEditor.html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<textarea id="hid_${inputId!}" name="${inputName!}" class="hidden">${defaultValue!}</textarea>
<pre id="${inputId!}" class="ace_editor ${cssClass!}" style="min-height:${height!}"><textarea class="ace_text-input">${defaultValue!}</textarea></pre>
<script>
$(function() {
// ACE-Editor代码编辑器
ace.require("ace/ext/language_tools");
let ${inputId!} = ace.edit("${inputId!}");
${inputId!}.setTheme("ace/theme/${theme!}");
${inputId!}.session.setMode("ace/mode/${language}");
${inputId!}.setOptions({
enableBasicAutocompletion : true,
enableSnippets : true,
enableLiveAutocompletion : true
});
// 通过change事件，捕获编辑器的最新内容
${inputId!}.getSession().on('change', function(e) {
$('#hid_${inputId!}').val(${inputId!}.getValue());
});
});
</script>
|
