背景
項目需要,在一些場景,用戶需要手動編寫一些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 也存在這個問題。