ace.js实现一个在线代码编辑器[通俗易懂]

ace.js实现一个在线代码编辑器[通俗易懂]

ACE简介：

功能实现

1、引入js

2、添加控件

、初始化组件

4、保存时代码语法检测

5、效果图：

6、在线测试：

7、遇到的一些问题：

项目需要，在一些场景，用户需要手动编写一些js脚本来实现自己的功能；前期一直用文本框显示，不便于编辑和查看。因此需要引入一个在线代码编辑器。效果如下：

ACE简介：

ACE是一个开源的、独立的、基于浏览器的代码编辑器，可以嵌入到任何web页面或JavaScript应用程序中。ACE支持超过40种语言语法高亮，缩进，代码提示功能且具有大量的主题；并能够处理代码多达404万行的大型文档。ACE开发团队称，ACE在性能和功能上可以媲美本地代码编辑器（如SublimeText、TextMate和Vim等）。

官方网址： Github地址：

支持语言：java、javascript、json、jsp、markdown、mysql、nginx…

功能实现

1、引入js

方式一：下载源码

下载地址1：/

代码语言：javascript

复制

<!-- 代码编辑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服务；/

代码语言：javascript

复制

<!-- 代码编辑ace.js   远程  -->
 <script src=".2.4/ace.js"></script>
 <script src=".2.4/ext-language_tools.js"></script>

2、添加控件

代码语言：javascript

复制

<pre id="codeEditor" class="ace_editor" style="min-height:20px">
 <s:textarea class="ace_text-input"   cssStyle="width:97.5%;height:20px;"/>
</pre>

、初始化组件

代码语言：javascript

复制

//初始化代码编辑器
	function initEditor(){
		//获取控件   id ：codeEditor
		editor = ("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.setOpti({
			enableBasicAutocompletion: true,
			enableSnippets: true,
			enableLiveAutocompletion: true
		});
	}

4、保存时代码语法检测

（正常情况下，输入的代码存在语法错误时会有红叉号提示；由于本项目中的代码会多达几百行，所以，在保存时需要获取一下编辑的的语法校验结果，存在异常时给出提示。）

代码语言：javascript

复制

//获取编辑器中语法校验的结果
var annotati = editor.getSession().getAnnotati();
//错误
var error="";
var errorum=0;
//警告
var warning="";
var warningum=0;
//遍历结果 记录提示信息
for(var aid = 0, alen = annotati.length; aid < alen; ++aid) {
	var row=annotati[aid].row+1;
	//存在错误 必须修改
	if(annotati[aid].type === 'error') {
	    var txt=" 行："+row+"；列："+annotati[aid].column+";  提示:"+annotati[aid].text;
		error+=txt+"<br>";
		errorum++;
	}
	//存在警告 可以不修改
	if(annotati[aid].type === 'warning'||annotati[aid].type === 'info') {
		var txt=" 行："+row+"；列："+annotati[aid].column+";  提示 : "+annotati[aid].text;
		warning+=txt+"<br>";
		warningum++;
	}
}
//存在错误 必须修改
if( error!="") {
	
			
}else {
//存在警告 可以不修改
if(warning!="") {
			 
	} 
        }

5、效果图：

存在语法错误时（当语法存在错误时，会有红叉号或黄叹号，把鼠标放上去会显示提示信息）：

正常时：

在线效果可参考：

6、在线测试：

.html

基本所有的效果都可以在这测试，很方便。

7、遇到的一些问题：

1、可校验错误数默认为50个；当超过100多行时或者错误过多少时，之后的代码无法校验语法。所以下载了源码，源码中的错误检测数量（只是js其他的不清楚）。这里js的语法校验时引用了另一个插件 jshint插件；在引用时会有个初始化，初始化里有个参数是maxerr 由默认的50改为10000。 也存在这个问题。