Comment faire d'un textarea un éditeur ACE ?

Question

J'aimerais pouvoir convertir des zones de texte spécifiques sur une page en éditeurs ACE.

Quelqu'un a-t-il des conseils à me donner ?

EDITAR:

Le fichier editor.html fonctionne avec une zone de texte, mais dès que j'en ajoute une deuxième, celle-ci n'est pas convertie en éditeur.

EDIT 2 :

J'ai décidé d'abandonner l'idée d'en avoir plusieurs, et d'en ouvrir une dans une nouvelle fenêtre. Ma nouvelle difficulté est que lorsque je cache() et montre() la zone de texte, l'affichage se dérègle. Avez-vous une idée ?

Answer 1

D'après ce que j'ai compris de l'idée de Ace, vous ne devriez pas faire un textarea un éditeur Ace lui-même. Vous devez créer un div supplémentaire et mettre à jour le textarea à l'aide des éléments suivants .getSession() à la place.

html

<textarea name="description"/>
<div id="description"/>

js

var editor = ace.edit("description");
var textarea = $('textarea[name="description"]').hide();
editor.getSession().setValue(textarea.val());
editor.getSession().on('change', function(){
  textarea.val(editor.getSession().getValue());
});

ou appelez simplement

textarea.val(editor.getSession().getValue());

uniquement lorsque vous soumettez le formulaire avec la zone de texte donnée. Je ne suis pas sûr que ce soit la bonne façon d'utiliser Ace, mais c'est la façon dont il est utilisé sur GitHub .

Answer 2

Duncansmart a une solution assez impressionnante sur sa page github, progressive-ace qui montre une façon simple de connecter un éditeur ACE à votre page.

En gros, nous obtenons tout <textarea> avec les éléments data-editor et convertir chacun d'eux en un éditeur ACE. L'exemple définit également certaines propriétés que vous devez personnaliser à votre guise, et montre comment vous pouvez utiliser les attributs data pour définir les propriétés de chaque élément, par exemple pour afficher ou masquer la gouttière à l'aide de la fonction data-gutter .

// Hook up ACE editor to all textareas with data-editor attribute
$(function() {
  $('textarea[data-editor]').each(function() {
    var textarea = $(this);
    var mode = textarea.data('editor');
    var editDiv = $('<div>', {
      position: 'absolute',
      width: textarea.width(),
      height: textarea.height(),
      'class': textarea.attr('class')
    }).insertBefore(textarea);
    textarea.css('display', 'none');
    var editor = ace.edit(editDiv[0]);
    editor.renderer.setShowGutter(textarea.data('gutter'));
    editor.getSession().setValue(textarea.val());
    editor.getSession().setMode("ace/mode/" + mode);
    editor.setTheme("ace/theme/idle_fingers");

    // copy back to textarea on form submit...
    textarea.closest('form').submit(function() {
      textarea.val(editor.getSession().getValue());
    })
  });
});

textarea {
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.9/ace.js"></script>
<textarea name="my-xml-editor" data-editor="xml" data-gutter="1" rows="15"></textarea>
<br>
<textarea name="my-markdown-editor" data-editor="markdown" data-gutter="0" rows="15"></textarea>

Answer 3

Vous pouvez avoir plusieurs éditeurs Ace. Il suffit de donner à chaque zone de texte un ID et de créer un éditeur Ace pour les deux IDS comme suit :

<style>
#editor, #editor2 {
    position: absolute;
    width: 600px;
    height: 400px;
}
</style>
<div style="position:relative; height: 450px; " >
&nbsp;
<div id="editor">some text</div>
</div>
<div style="position:relative; height: 450px; " >
&nbsp;
<div id="editor2">some text</div>
</div>
<script src="ace.js" type="text/javascript" charset="utf-8"></script>
<script src="theme-twilight.js" type="text/javascript" charset="utf-8"></script>
<script src="mode-xml.js" type="text/javascript" charset="utf-8"></script>
<script>
window.onload = function() {
    var editor = ace.edit("editor");
    editor.setTheme("ace/theme/twilight");
    var XmlMode = require("ace/mode/xml").Mode;
    editor.getSession().setMode(new XmlMode());

    var editor2 = ace.edit("editor2");
    editor2.setTheme("ace/theme/twilight");
    editor2.getSession().setMode(new XmlMode());

};
</script>

Answer 4

Pour tous ceux qui veulent juste un exemple minimal et fonctionnel de l'utilisation de Ace à partir du CDN :

<!DOCTYPE html>
<html lang="en">

<body style="margin:0">
  <div id="editor">function () { 
  console.log('this is a demo, try typing!')
}
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.1.01/ace.js" type="text/javascript" charset="utf-8"></script>
  <script>
    var editor = ace.edit("editor");
    editor.setTheme("ace/theme/monokai");
    editor.getSession().setMode("ace/mode/javascript");
    document.getElementById("editor").style.height = "120px";
  </script>
</body>

</html>

Answer 5

Pour créer un éditeur, il suffit de faire :

HTML :

<textarea id="code1"></textarea>
<textarea id="code2"></textarea>

JS :

var editor1 = ace.edit('code1');
var editor2 = ace.edit('code2');
editor1.getSession().setValue("this text will be in the first editor");
editor2.getSession().setValue("and this in the second");

CSS :

#code1, code2 { 
  position: absolute;
  width: 400px;
  height: 50px;
}

Ils doivent être positionnés et dimensionnés de manière explicite. Par show() et hide(), je pense que vous faites référence aux fonctions jQuery. Je ne sais pas exactement comment elles procèdent, mais elles ne peuvent pas modifier l'espace qu'elles occupent dans le DOM. Je cache et montre en utilisant :

$('#code1').css('visibility', 'visible');
$('#code2').css('visibility', 'hidden');

Si vous utilisez la propriété css "display", cela ne fonctionnera pas.

Consultez le wiki ici pour savoir comment ajouter des thèmes, des modes, etc... https://github.com/ajaxorg/ace/wiki/Embedding---API

Remarque : il n'est pas nécessaire que ce soit des zones de texte, il peut s'agir de n'importe quel élément que vous souhaitez.