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 也存在這個問題。