theme builds javascript html5 autocomplete syntax-highlighting ace-editor

javascript - builds - Autocompletado en el editor de ACE



ace builds (6)

Actualmente no está disponible en ninguna forma. De acuerdo con este problema: https://github.com/ajaxorg/ace/issues/1031

Autocompletar solo está disponible en Cloud9 IDE (que se basa en ACE) y puede estar disponible más tarde como un complemento independiente para ACE Editor.

He encontrado una pregunta similar: autocompletar Ace Editor y varios idiomas

Pero las respuestas fueron que la autocompletación no es compatible con ACE, y de acuerdo con el grupo de Google para Ace Editor "Está en mi lista para Ace y definitivamente la necesitamos para Cloud9".

Esta publicación tiene un año de antigüedad y, como puede ver, la nube9 ahora admite la autocompletación: https://c9.io/site/features/

Entonces, ¿el autocompletado está disponible en Ace Editor por defecto? No puedo encontrar ninguna información al respecto.


Asegúrese de tener las siguientes importaciones

require(''ace/ext/language_tools''); require(''ace/multi_select'');

Use debajo de un fragmento según sea necesario

editor.setOptions({ enableBasicAutocompletion: true, enableSnippets: true, enableLiveAutocompletion: true });


Autocompletar ahora es una parte oficial de la API. Habilitarlo toma 3 líneas de código:

ace.require("ace/ext/language_tools"); var editor = ace.edit("editor"); editor.setOptions({ enableBasicAutocompletion: true });

Dependiendo de su configuración con require-js, también puede necesitar incluir un archivo javascript adicional en el html para su página:

<script src="ace/ext-language_tools.js"></script>

Puede encontrar una demostración en https://github.com/ajaxorg/ace/blob/master/demo/autocompletion.html

Y aquí está la página wiki que acabo de escribir sobre el tema:

https://github.com/ajaxorg/ace/wiki/How-to-enable-Autocomplete-in-the-Ace-editor


Dado que Autocomplete ahora es una parte de la API de ace.c9.io :

1) Incluye ace.js en la parte superior de tu html:

<script type="text/javascript" src="js/ace.js"></script>

2) También incluya su mode (tipo de idioma):

<script type="text/javascript" src="js/mode-yaml.js"></script>

3) También incluya su theme :

<script type="text/javascript" src="js/theme-monokai.js"></script>

4) También incluye ex-language_tools.js :

<script src="js/ext-language_tools.js"></script>

5) Agregue su div con el editor de id (este se convertirá en su IDE ):

<div id="editor"></div>

6) Incluye la siguiente secuencia de comandos (mira mis comentarios para entenderlos):

<script> var langTools = ace.require("ace/ext/language_tools");

La línea siguiente transforma tu div con id = "editor" en el editor

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

La línea inferior establece el tema de color. Otros temas disponibles mode ... pruébalos here

editor.setTheme("ace/theme/monokai");

La línea siguiente establece el modo según el lenguaje de programación ... otros modos aquí:

editor.getSession().setMode("ace/mode/yaml"); editor.setShowPrintMargin(false);

Las líneas a continuación activan el autocompletado en tiempo real.

editor.setOptions({ enableBasicAutocompletion: true, enableSnippets: true, enableLiveAutocompletion: false });

Por lo tanto, todo se podría dividir en lo siguiente:

<!DOCTYPE html> <html> <head> <title>IDE AUTOCOMPLETE</title> <link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.min.css"> <script src="//code.jquery.com/jquery-1.11.2.min.js"></script> <script type="text/javascript" src="js/ace.js"></script> <script type="text/javascript" src="js/mode-yaml.js"></script> <script type="text/javascript" src="js/theme-monokai.js"></script> <script src="js/ext-language_tools.js"></script> </head> <body> <!-- EDITOR SECTION BELOW! --> <div id="editor"></div> <script> var langTools = ace.require("ace/ext/language_tools"); var editor = ace.edit("editor"); editor.setTheme("ace/theme/monokai"); editor.getSession().setMode("ace/mode/yaml"); editor.setShowPrintMargin(false); editor.setOptions({ enableBasicAutocompletion: true, enableSnippets: true, enableLiveAutocompletion: false }); </script> <!-- EDITOR SECTION ABOVE --> </body> </html>


El autocompletado todavía no está disponible de forma nativa para Ace, sin embargo, hemos implementado un componente que hace eso para el IDE de Cody, que está basado en As y en fuente completamente abierta. Puedes verificar el código en Github , seguramente te ayudará a escribir el tuyo.


AjaxOrg ha enviado una confirmación en su repositorio de Cloud9 con el siguiente mensaje:

Complemento de finalización de código

Supongo que esta sería la respuesta a esta pregunta.

Here está el compromiso.

Además, creo que this es un buen proyecto que puede ayudarnos.

Para obtener más información, podemos seguir el mensaje de este problema abierto en el repositorio de Cloud9 .