web-dev-qa-db-fra.com

Saisie semi-automatique dans l'éditeur ACE

J'ai trouvé une question similaire: Saisie semi-automatique Ace Editor et plusieurs langues

Mais les réponses ont été que la saisie semi-automatique n'est pas prise en charge par ACE, et selon groupe Google pour Ace Editor "Il est sur mon vœu pour Ace et nous en avons définitivement besoin pour Cloud9".

Ce message a un an et comme vous pouvez le voir, le cloud9 prend désormais en charge la saisie semi-automatique: https://c9.io/site/features/

La saisie semi-automatique est-elle donc disponible par défaut dans Ace Editor? Je ne trouve aucune information à ce sujet.

javascripthtml5autocompletesyntax-highlightingace-editor
35
Wojciech Danilo

La saisie semi-automatique est désormais une partie officielle de l'API. L'activer nécessite 3 lignes de code:

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

Selon votre configuration avec require-js, vous devrez peut-être également inclure un fichier javascript supplémentaire dans le html de votre page:

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

Vous pouvez trouver une démo sur https://github.com/ajaxorg/ace/blob/master/demo/autocompletion.html

Et voici la page wiki que je viens d'écrire sur le sujet:

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

51
hwjp

Étant donné que la saisie semi-automatique fait maintenant partie de l'api :

1) Inclure ace.js en haut de votre html:

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

2) Incluez également votre mode (type de langue):

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

3) Incluez également votre thème :

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

4) Incluez également ex-language_tools.js :

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

5) Ajoutez votre div avec l'éditeur d'id (cela deviendra votre IDE ):

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

6) Incluez le script suivant (voir mes commentaires pour les comprendre):

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

La ligne ci-dessous transforme votre div avec id = "editor" en éditeur

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

La ligne ci-dessous définit le thème des couleurs. Autres thèmes disponibles ici ... essayez-les ici

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

La ligne ci-dessous définit le mode basé sur le langage de programmation ... d'autres modes ici:

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


    editor.setShowPrintMargin(false);

Les lignes ci-dessous activent la saisie semi-automatique en temps réel.

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

Ainsi, le tout pourrait être décomposé comme suit: 

<!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>
13
maudulus

La saisie semi-automatique n'est toujours pas disponible en natif pour Ace, cependant nous avons implémenté un composant faisant cela pour Codiad IDE qui est basé sur Ace et entièrement open source. Vous pouvez vérifier le code sur Github , cela vous aidera sûrement à écrire le vôtre.

11
Flolagale

AjaxOrg a poussé une validation dans leur Cloud9 dépôt avec le message suivant:

Plug-in de complétion de code

Je suppose que ce serait la réponse à cette question.

Ici est le commit.

Aussi, je pense que this est un bon projet qui peut nous aider.

Pour plus d'informations, nous pouvons suivre le message de ce problème ouvert dans le référentiel Cloud9 .

3
Ionică Bizău

Assurez-vous d'avoir les importations suivantes

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

Utiliser sous l'extrait au besoin

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

Actuellement, il n'est disponible sous aucune forme. Selon ce problème: https://github.com/ajaxorg/ace/issues/1031

La saisie semi-automatique est uniquement disponible dans Cloud9 IDE (qui est basé sur ACE) et peut être disponible plus tard en tant que plugin séparé pour ACE Editor.

0
Inferpse