Pour créer un éditeur, faites simplement:
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 crois 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 prend 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 des zones de texte, ils peuvent être l'élément de votre choix.