ace.js实现一个在线代码编辑器

https://www.w3cschool.cn/tryrun/runcode?lang=javascript

https://ace.c9.io/build/kitchen-sink.html

 

背景

ACE简介：

功能实现

1、引入js

         2、添加控件

3、初始化组件

4、保存时代码语法检测 

5、效果图：

6、官网在线测试： 

7、遇到的一些问题：

---

背景

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

         

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/

1.  
   <!-- 代码编辑ace.js 本地-->
2.  
   <script src="../js/ace/src-min/ace.js" type="text/javascript"></script>
3.  
   <script src="../js/ace/src-min/ext-language_tools.js" type="text/javascript"></script>

方式二： 引用在线的  

bootstrap中文网提供的cdn服务；http://www.bootcdn.cn/

1.  
   <!-- 代码编辑ace.js 远程 -->
2.  
   <script src="http://cdn.bootcss.com/ace/1.2.4/ace.js"></script>
3.  
   <script src="http://cdn.bootcss.com/ace/1.2.4/ext-language_tools.js"></script>

 

2、添加控件

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

3、初始化组件

1.  
   //初始化代码编辑器
2.  
   function initEditor(){
3.  
   //获取控件 id ：codeEditor
4.  
   editor = ace.edit("codeEditor");
5.  
   //设置风格和语言（更多风格和语言，请到github上相应目录查看）
6.  
   theme = "monokai";
7.  
   //theme = "terminal";
8.  
   //语言
9.  
   language = "javascript";
10.  
    editor.setTheme("ace/theme/" + theme);
11.  
    editor.session.setMode("ace/mode/" + language);
12.  
    //字体大小
13.  
    editor.setFontSize(15);
14.  
    //设置只读（true时只读，用于展示代码）
15.  
    editor.setReadOnly(false);
16.  
    //自动换行,设置为off关闭
17.  
    editor.setOption("wrap", "free");
18.  
    //启用提示菜单
19.  
    ace.require("ace/ext/language_tools");
20.  
    editor.setOptions({
21.  
    enableBasicAutocompletion: true,
22.  
    enableSnippets: true,
23.  
    enableLiveAutocompletion: true
24.  
    });
25.  
    }

4、保存时代码语法检测 

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

1.  
    
2.  
   //获取编辑器中语法校验的结果
3.  
   var annotations = editor.getSession().getAnnotations();
4.  
   //错误
5.  
   var error="";
6.  
   var errorNum=0;
7.  
   //警告
8.  
   var warning="";
9.  
   var warningNum=0;
10.  
    //遍历结果 记录提示信息
11.  
    for(var aid = 0, alen = annotations.length; aid < alen; ++aid) {
12.  
    var row=annotations[aid].row+1;
13.  
    //存在错误 必须修改
14.  
    if(annotations[aid].type === 'error') {
15.  
    var txt=" 行："+row+"；列："+annotations[aid].column+"; 提示:"+annotations[aid].text;
16.  
    error+=txt+"<br>";
17.  
    errorNum++;
18.  
    }
19.  
    //存在警告 可以不修改
20.  
    if(annotations[aid].type === 'warning'||annotations[aid].type === 'info') {
21.  
    var txt=" 行："+row+"；列："+annotations[aid].column+"; 提示 : "+annotations[aid].text;
22.  
    warning+=txt+"<br>";
23.  
    warningNum++;
24.  
    }
25.  
    }
26.  
    //存在错误 必须修改
27.  
    if( error!="") {
28.  
     
29.  
     
30.  
    }else {
31.  
    //存在警告 可以不修改
32.  
    if(warning!="") {
33.  
     
34.  
    }
35.  
    }

5、效果图：

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

 

 正常时：

在线效果可参考： https://www.w3cschool.cn/tryrun/runcode?lang=javascript

6、官网在线测试： 

https://ace.c9.io/build/kitchen-sink.html

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

7、遇到的一些问题：

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