javascript - builds - Autocompletado para Ace Editor

ace builds

Question

OK, este es el trato:

• Estoy usando Ace Editor
• La aplicación en la que está integrado el editor está escrita Objective-C / Cocoa
• Necesito Autocompletar (para un conjunto dado de palabras clave)

Ahora, aquí está el truco:

• Sé que AutoCompletion todavía no es compatible de forma nativa
• Conozco algunos intentos de otros (por ejemplo, Codiad IDE , Gherkin , Alloy-UI ), algunos haciendo uso de Jquery UI Autocompletar , pero todavía no puedo entender cómo se podría adaptar esto a una configuración de Ace existente
• Todavía no estoy seguro de si debería buscar una solución orientada a JS o simplemente usar Objective-C / Cocoa para eso

Cualquier ayuda sería más que apreciada.

Answer 1

La parte más difícil de la autocompletación es descubrir las palabras clave, el resto es fácil de hacer.

1. necesita una ventana emergente, y listView para mostrar las terminaciones, podría ser mejor utilizar una ventana emergente basada en Cocoa.
2. alguna función de filtrado, inicios simplesCon la verificación funcionará, pero puede usar una combinación de flex mejor como sublime
3. llamada trivial a editor.sesión.replace para insertar la finalización seleccionada

Para 2-3 debe comentar en https://github.com/ajaxorg/ace/issues/110 acerca de su uso específico ya que hay un trabajo para obtener soporte nativo para AutoCompletion.

Answer 2

AutoCompletion se puede lograr en el editor ace.

Código:

    var editor = ace.edit(''editor'');
    editor.setTheme("ace/theme/eclipse");
    editor.getSession().setMode("ace/mode/java");
    editor.setShowInvisibles(true);
    editor.setDisplayIndentGuides(true);
    editor.getSession().setUseWrapMode(true);    
    var jsonUrl = "JSON/Components/proce.json";
    //the url where the json file with the suggestions is present
    var langTools = ace.require("ace/ext/language_tools");
    editor.setOptions({enableBasicAutocompletion: true});
    var rhymeCompleter = {
        getCompletions: function(editor, session, pos, prefix, callback) {
            if (prefix.length === 0) { callback(null, []); return }
            $.getJSON(jsonUrl, function(wordList) {
                callback(null, wordList.map(function(ea)  {           
                    return {name: ea.word, value: ea.word, meta: "optional text"}
                }));
            })
        }
    }

    langTools.addCompleter(rhymeCompleter);

Formato de archivo Json:

   [ {"word":"hello"}, 
   {"word":"good morning"},
   {"word":"suggestions"},
   {"word":"auto suggest"},
   {"word":"try this"}]

Referencia / Demostración:

http://plnkr.co/edit/6MVntVmXYUbjR0DI82Cr?p=preview

Answer 3

Para agregar Live Auto Completion en Ace hoy en día: en tu HTML incluye el ace / ext-language_tools.js. Los . la llamada aún no funciona bien, por lo que quizás tengas que ingresar ctrl-space o alt-space para eso, pero ahora se mostrarán elementos de sintaxis estándar, como la función de escritura. Entonces:

var editor = ace.edit("editor");

ace.require("ace/ext/language_tools");
editor.setOptions({
    enableBasicAutocompletion: true,
    enableSnippets: true,
    enableLiveAutocompletion: true
});