30

ho trovato domanda simmilar: Ace Editor autocomplete and multiple languagesCompletamento automatico in ACE editor di

Ma le risposte sono state che il completamento automatico non è supportato da ACE, e secondo Google group for Ace Editor "E 'il mio wishlish per Ace e abbiamo definitivamente bisogno per Nuvola 9".

Questo post è un anno di età e come si può vedere, la cloud9 supporta autocompletamento ora: https://c9.io/site/features/

Quindi è il completamento automatico disponibile in Ace Editor di default? Non riesco a trovare alcuna informazione a riguardo.

risposta

43

Il completamento automatico è ora una parte ufficiale dell'API.Abilitazione ci vogliono 3 righe di codice:

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

A seconda della configurazione con require-js, potrebbe anche essere necessario includere un file aggiuntivo javascript nel codice HTML per la tua pagina:

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

Puoi trovare una demo https://github.com/ajaxorg/ace/blob/master/demo/autocompletion.html

Ed ecco la pagina wiki che ho appena scritto sul tema:

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

+0

questo è molto buono, ma solo una domanda veloce, dov'è il resto della documentazione? Voglio scrivere alcuni snippet per latex e sono bloccato, come potrei scrivere snippet per qualcosa come \ begin {... che può avere 10 cose diverse dopo di esso? vedere le possibilità qui: https://github.com/mercutiodesign/texmaker-3.3.3/blob/master/completion/completion.txt – mike

+0

ci sono alcuni documenti a http://ace.c9.io/ – hwjp

+4

I can ' Credo che non ci sia documentazione migliore per questo sul sito ufficiale ... grazie mille, ho cercato davvero a lungo finché non ho trovato la tua risposta – moeTi

0

Attualmente non è disponibile in nessuna forma. Secondo questo problema: https://github.com/ajaxorg/ace/issues/1031

completamento automatico è disponibile solo in Cloud9 IDE (che si basa su ACE) e possono essere disponibili in seguito come un plugin separato per ACE Editor.

+0

Potresti dirmi due cose aggiuntive: non è cloud9 open source (o alcune delle sue funzionalità non è open source?) E non creare una domanda separata - se sai - quale libreria è la gui cloud9 scritta in ? –

+0

1) Sì, alcune funzionalità non sono open source 2) Stanno usando il proprio framework per l'interfaccia utente - http://ui.ajax.org/ – Inferpse

+0

L'editor di gherkin basato su Ace sembra averlo. https://github.com/cucumber/gherkin-editor/blob/master/public/js/gherkin-editor/autocomplete.js –

9

L'autocompletamento non è ancora disponibile in modo nativo per Ace, tuttavia abbiamo implementato un componente che lo fa per il Codiad IDE che è basato su Ace e completamente open source. Puoi controllare il codice su Github, sicuramente ti aiuterà a scrivere il tuo.

+0

Posso vedere qualche grande lavoro laggiù. Ho dato un'occhiata al tuo file 'init.js'. Potrebbe aiutarmi per quanto riguarda * come * questa cosa è integrata in Ace? Dove/Come viene caricato? –

+2

Non è integrato _into_ Asso in quanto tale, lo vedo più come un componente che aggiungiamo sopra di esso. Intercettiamo la scorciatoia da tastiera (Ctrl + Spazio) e apriamo un popup che riempiamo di suggerimenti. Usiamo l'API Ace per ottenere il testo dal documento per creare i suggerimenti e infine inserire il testo del suggerimento. Dai un'occhiata al componente 'keybindings', potrebbe aiutare un po '. – Flolagale

+0

Grazie mille per i suggerimenti! Ne darò sicuramente un'occhiata. :-) –

3

AjaxOrg ha spinto a impegnarsi nella loro repository Cloud9 con il seguente messaggio:

completamento del codice plug-in

suppongo che questo sarebbe la risposta a questa domanda .

Here è il commit.


Inoltre, penso che this sia un buon progetto che può aiutarci.

Per ulteriori informazioni, possiamo seguire il messaggio da this issue opened in Cloud9 repository.

9

Dal completamento automatico è ora una parte della ACE api:

1) Inserisci ace.js nella parte superiore del tuo html:

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

2) comprendono anche il vostro mode (tipo di lingua):

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

3) comprendono anche il vostro theme:

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

4) comprendono anche ex-language_tools.js:

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

5) Aggiungi il tuo div con editor di id (questo diventerà il vostro IDE):

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

6) Includere il seguente script (vedere i miei commenti per capirli):

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

La riga sotto trasforma il div con id = "edito r "nell'editor

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

La riga in basso imposta il tema del colore. Altri temi disponibili here ... provarli here

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

Linea sotto imposta la modalità basata su linguaggio di programmazione ... altre modalità qui:

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


    editor.setShowPrintMargin(false); 

righe sotto si trasforma ON completamento automatico in tempo reale.

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

Così, il tutto potrebbe essere suddiviso in quanto segue:

<!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> 
+1

Grazie. Ho dovuto chiamare 'setOption()' piuttosto che 'setOptions ({enableBasicAutocompletion: true})'. Ho usato editor.getOptions() e editor.getOption ("enableBasicAutocompletion") per verificare che il valore fosse effettivamente impostato e che tutto funzionasse con 'editor.setOption (" enableBasicAutocompletion ", true);' –

1

Assicurarsi di avere seguito le importazioni

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

Usa sotto frammento come richiesto