作者：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> <!--导入js库--> <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标签和textarea标签之间不要有空格或换行，这些元素都会当着编辑器内容的一部分，造成出现“开头多出一些空格字符”的怪现象！！！--> <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"); // set value and reset undo historyeditor.getValue(); // or session.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.undo(); |
重做回退：
|
1
|
editor.redo(); |
光标跳转到指定行：
|
1
|
editor.gotoLine(); |
查找替换：
|
1
|
editor.execCommand('replace'); |
自动换行：
|
1
|
editor.setOption("wrap", "free"); //关闭时free换成off |
参考：
工作项目中的一次应用
模板文件：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标签和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> |
