1、在github上获取资源:
git clone https://github.com/ajaxorg/ace-builds.git
2、导入js插件:
<script src="ace-builds/src/ace.js"></script>
<script src="ace-builds/src/mode-tcl.js"></script> //包含这个文件是为了在编辑器中使用tcl语言,检查语法和自动补全
<script src="ace-builds/src/ext-language_tools.js"></script>
3、定义div,关联editor:
<div id="stepEditor" style="width:900px;height:600px"></div>
4、定义editor,自动补全:
这一段可以实现一般的自动补全了:
var langTools = ace.require("ace/ext/language_tools");
var editor = ace.edit("stepEditor");
editor.setTheme("ace/theme/chrome");
editor.getSession().setMode("ace/mode/tcl"); //支持几十种语言,这里是tcl
editor.setOptions({
enableBasicAutocompletion: true,
enableSnippets: false,
enableLiveAutocompletion: true
});
下面是自定义的自动补全:实现的功能是根据用户选择的命令,自动补全参数:
比如:print -a|-b|-c,其中print是命令,-a,-b,-c都是可选的参数,当用户输入print,然后输入空格,然后输入-(dash),就会提示:
-a -b -c,让用户选择一个。
var wordList = [];
var icc2Commands = null;
$.getJSON("auto_completion.json",function(obj){ //jQuery读取json文件
icc2Commands = obj;
for(var name in obj){
wordList.push(name);
}
});
var icc2Completer = {
//identifierRegexps: [/[a-zA-Z_0-9\-\$\.\u00A2-\uFFFF]/],
getCompletions: function(editor, session, pos, prefix, callback) {
var curLine = session.getDocument().getLine(pos.row);
var curTokens = curLine.slice(0, pos.column).split(/\s+/);
var curCmd = curTokens[0];
if (!curCmd) return;
var lastToken = curTokens[curTokens.length-1];
var candidates = [];
if (lastToken && lastToken.match(/^-/)) {
for (var option of icc2Commands[curCmd]) {
if (option.startsWith(lastToken.slice(1))) {
candidates.push("-"+option);
}
}
callback(null, candidates.map(function(ea) {
return {name: ea, value: ea, score: 300, meta: "ICC2Option"};
}));
}
else{
callback(null, wordList.map(function(word) {
return {
caption: word,
value: word,
meta: "ICC2Command"
};
}));
}
}
}
langTools.addCompleter(icc2Completer);