在web page中嵌入ace editor

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);



©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页