Comment puis-je créer un éditeur de texte comme éditeur d'ACE?

Dans la mesure où j'ai compris l'idée d'Ace, vous ne devriez pas créer une classe de texte comme éditeur d'Ace. Vous devriez créer une division de texte div et mise à jour supplémentaire à l'aide de 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 appelez simplement

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

Uniquement lorsque vous soumettez le formulaire avec la zone de texte donnée. Je ne sais pas si c'est le bon moyen d'utiliser Ace, mais c'est la façon dont il est utilisé sur GitHub .

Vous pouvez avoir plusieurs éditeurs Ace. Il suffit de donner à chaque textarea une ID et de créer un éditeur d'Ace pour les deux IDS:

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

Puisque la réponse de mon seul lien a été supprimée (compréhensiblement), je vais faire une 2ème tentative ici, y compris le code (légèrement modifié) qui a été lié à la page github de duncansmart, à l'aide d'un assistant progressif et dont vous avez trouvé beaucoup d'utilité. Cela démontre un moyen simple de brancher un éditeur ACE sur votre page.

Fondamentalement, nous obtenons tous les éléments <textarea> avec l'attribut de l' data-editor et convertissons chacun à un éditeur ACE. L'exemple définit également certaines propriétés que vous devez personnaliser à votre convenance et démontre comment utiliser data attributs de data pour définir les propriétés par élément, comme en montrant et en cachant la gouttière avec la gouttière de 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('visibility', 'hidden'); 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="//d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js"></script> <textarea name="my-xml-editor" data-editor="xml" data-gutter="1" rows="15"></textarea> <textarea name="my-markdown-editor" data-editor="markdown" data-gutter="0" rows="15"></textarea> 

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 explicitement. 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 il 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é 'display' de css, 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 être des zones de texte, ils peuvent être n'importe quel élément que vous voulez.