ace.js實現一個在線代碼編輯器

背景
      項目需要，在一些場景，用戶需要手動編寫一些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/

<!-- 代碼編輯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、效果圖：

   存在語法錯誤時（當語法存在錯誤時，會有紅色叉號或黃色嘆號，把鼠標放上去會顯示提示信息）：

   

 

正常時：

 

 

 

在線效果可參考： 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 也存在這個問題。
————————————————
版權聲明：本文為CSDN博主「明月566」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/k741451/article/details/106266908