web-dev-qa-db-fra.com

Comment faire de textarea un éditeur ACE?

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

Quelqu'un at-il des pointeurs s'il vous plaît?

MODIFIER:

Le fichier editor.html fonctionne avec une zone de texte, mais dès que j'en ajoute une seconde, la seconde 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 un dans une nouvelle fenêtre. Ma nouvelle situation est que, lorsque je cache () et que je montre () la zone de texte, l’affichage se dégrade. Des idées?

javascripttextareaace-editor
87
Paul

Pour autant que j'ai compris l'idée d'Ace, vous ne devriez pas créer un textarea un éditeur Ace. Vous devez créer une div supplémentaire et mettre à jour textarea en utilisant la fonction . GetSession ().

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 simplement appeler

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

seulement 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.

152
installero

Duncansmart propose une solution assez impressionnante sur sa page github, progressive-ace , qui illustre un moyen simple de connecter un éditeur ACE. à votre page.

En gros, nous obtenons tous les éléments <textarea> Avec l'attribut data-editor Et les convertissons 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 par élément, telles que l'affichage et le masquage de la gouttière avec 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>
26
billynoah

Vous pouvez avoir plusieurs éditeurs Ace. Donnez simplement à chaque textarea un identifiant et créez un éditeur d’as pour les deux ID comme ceci:

<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>
8
Breck

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

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 explicitement positionnés et dimensionnés. Par show () et hide () Je pense que vous faites référence aux fonctions jQuery. Je ne sais pas exactement comment ils le font, mais cela ne peut pas modifier l'espace qu'il occupe 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: ils ne doivent pas nécessairement être textareas, ils peuvent être ce que vous voulez.

0
Bobby