大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺
背景
项目需要，在一些场景，用户需要手动编写一些js脚本来实现自己的功能；前期一直用文本框显示，不便于编辑和查看。因此需要引入一个在线代码编辑器。效果如下：
![ace.js实现一个在线代码编辑器[通俗易懂]](http://qn.javajgs.com/20220814/6e06f51a-ea35-4fbf-843e-f49613518ebb20220814bdc6ef72-bbfd-4e58-8bba-740ed129019a1.jpg)
![ace.js实现一个在线代码编辑器[通俗易懂]](https://javaforall.net/wp-content/uploads/2020/11/2020110817443450.jpg)
ACE简介：
ACE是一个开源的、独立的、基于浏览器的代码编辑器，可以嵌入到任何web页面或JavaScript应用程序中。ACE支持超过40种语言语法高亮，缩进，代码提示功能且具有大量的主题；并能够处理代码多达404万行的大型文档。ACE开发团队称，ACE在性能和功能上可以媲美本地代码编辑器（如SublimeText、TextMate和Vim等）。
官方网址：https://ace.c9.io
Github地址：https://github.com/ajaxorg/ace
支持语言：java、javascript、json、jsp、markdown、mysql、nginx…
功能实现
1、引入js
方式一：下载源码
下载地址1：https://github.com/ajaxorg/ace-builds/
<!-- 代码编辑ace.js 本地-->
<script src="../js/ace/src-min/ace.js" type="text/javascript"></script>
<script src="../js/ace/src-min/ext-language_tools.js" type="text/javascript"></script>
方式二： 引用在线的
bootstrap中文网提供的cdn服务；http://www.bootcdn.cn/
<!-- 代码编辑ace.js 远程 -->
<script src="http://cdn.bootcss.com/ace/1.2.4/ace.js"></script>
<script src="http://cdn.bootcss.com/ace/1.2.4/ext-language_tools.js"></script>
2、添加控件
<pre id="codeEditor" class="ace_editor" style="min-height:320px">
<s:textarea class="ace_text-input" cssStyle="width:97.5%;height:320px;"/>
</pre>3、初始化组件
//初始化代码编辑器
function initEditor(){
//获取控件 id ：codeEditor
editor = ace.edit("codeEditor");
//设置风格和语言（更多风格和语言，请到github上相应目录查看）
theme = "monokai";
//theme = "terminal";
//语言
language = "javascript";
editor.setTheme("ace/theme/" + theme);
editor.session.setMode("ace/mode/" + language);
//字体大小
editor.setFontSize(15);
//设置只读（true时只读，用于展示代码）
editor.setReadOnly(false);
//自动换行,设置为off关闭
editor.setOption("wrap", "free");
//启用提示菜单
ace.require("ace/ext/language_tools");
editor.setOptions({
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: true
});
}4、保存时代码语法检测
（正常情况下，输入的代码存在语法错误时会有红色叉号提示；由于本项目中的代码会多达几百行，所以，在保存时需要获取一下编辑的的语法校验结果，存在异常时给出提示。）
//获取编辑器中语法校验的结果
var annotations = editor.getSession().getAnnotations();
//错误
var error="";
var errorNum=0;
//警告
var warning="";
var warningNum=0;
//遍历结果 记录提示信息
for(var aid = 0, alen = annotations.length; aid < alen; ++aid) {
var row=annotations[aid].row+1;
//存在错误 必须修改
if(annotations[aid].type === 'error') {
var txt=" 行："+row+"；列："+annotations[aid].column+"; 提示:"+annotations[aid].text;
error+=txt+"<br>";
errorNum++;
}
//存在警告 可以不修改
if(annotations[aid].type === 'warning'||annotations[aid].type === 'info') {
var txt=" 行："+row+"；列："+annotations[aid].column+"; 提示 : "+annotations[aid].text;
warning+=txt+"<br>";
warningNum++;
}
}
//存在错误 必须修改
if( error!="") {
}else {
//存在警告 可以不修改
if(warning!="") {
}
}5、效果图：
存在语法错误时（当语法存在错误时，会有红色叉号或黄色叹号，把鼠标放上去会显示提示信息）： ![ace.js实现一个在线代码编辑器[通俗易懂]](http://qn.javajgs.com/20220814/b7ec247e-be27-4bed-8eb3-e943f01abc0720220814afd1271e-6990-4891-9c9a-06c493db741b1.jpg)
正常时：
![ace.js实现一个在线代码编辑器[通俗易懂]](http://qn.javajgs.com/20220814/956ecc52-32fc-4dd4-aed7-5a8210bf986520220814e8b65981-1a51-4f9f-a9ec-b7fa07308fff1.jpg)
在线效果可参考： https://www.w3cschool.cn/tryrun/runcode?lang=javascript
6、官网在线测试：
https://ace.c9.io/build/kitchen-sink.html
基本所有的效果都可以在这测试，很方便。
![ace.js实现一个在线代码编辑器[通俗易懂]](http://qn.javajgs.com/20220814/87b9476d-a5e5-44f8-a421-417f7d4f5b6820220814521cb5ac-2cc2-4113-9758-0d3468f5bd151.jpg)
7、遇到的一些问题：
1、可校验错误数默认为50个；当超过100多行时或者错误过多少时，之后的代码无法校验语法。所以下载了源码，源码中的错误检测数量（只是js其他的不清楚）。这里js的语法校验时引用了另一个插件 jshint插件；在引用时会有个初始化，初始化里有个参数是maxerr 由默认的50改为10000。 https://www.w3cschool.cn/tryrun/runcode?lang=javascript 也存在这个问题。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/170425.html原文链接：https://javaforall.net
