ACE Editor（代码编辑器） 入门教程 作者：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 history
editor.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>
|
标签：ACE,ace,入门教程,编辑器,inputId,Editor,true,editor From： https://www.cnblogs.com/duanweishi/p/17358220.html