Come ottengo il valore dall'editor ACE?

Question

Sto usando l'editor ACE per la prima volta. Ho le seguenti domande relative ad esso.

1. Come faccio a trovare l'istanza di ACE redattore della pagina? Non voglio per mantenere una variabile globale che manterrà l'istanza dell'editor. I deve trovare la sua istanza su richiesta.

2. Come ottenere e impostare il suo valore?

Io sono aperto a suggerimenti per qualsiasi editor di meglio di ACE editore che sosterrà quasi tutti i tipi di linguaggio/markup/css etc e altamente integrato con jQuery.

Answer 1

Per loro API:

Markup:

<div id="aceEditor" style="height: 500px; width: 500px">some text</div> 

Trovare un esempio:

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

Ottenere/Valori di impostazione:

var code = editor.getValue(); 

editor.setValue("new code here"); 

Sulla base della mia esperienza, Ace è il miglior editor di codice che abbia mai visto. Ci sono pochi altri come CodeMirror ecc. Ma li ho trovati meno utili o difficili da integrare rispetto ad Ace.

Here's a Wiki page for comparision of such editors.

C'è anche uno pagato che non ho provato (e non riesco a ricordare per ora). Sarà aggiornato più tardi se riesco a trovarlo.

Answer 2

Per salvare il contenuto del l'editor ho messo subito un input nascosto prima di esso, e inizializzato l'editor in questo modo:

var $editor = $('#editor'); 
    if ($editor.length > 0) { 
     var editor = ace.edit('editor'); 
     editor.session.setMode("ace/mode/css"); 
     $editor.closest('form').submit(function() { 
      var code = editor.getValue(); 
      $editor.prev('input[type=hidden]').val(code);     
     }); 
    } 

Quando il mio modulo viene inviato otteniamo il valore editore e copiarlo nella nascosta ingresso.

Answer 3

Supponiamo di aver inizializzato l'editor di assi su un tag in html. EX: <div id="MyAceEditor">this the editor place holder</div>.

Nella sezione JavaScript, dopo ace.js di carico,

Il primo passo è quello di trovare un'istanza del vostro editor come di seguito.

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

Per ottenere il valore dall'editor degli assi, utilizzare il metodo getValue() come indicato di seguito.

var myCode = editor.getSession().getValue(); 

Per impostare il valore all'editor ace (spingere qualche codice nell'editor), utilizzare setValue() metodo come sotto.

editor.getSession().setValue("write your code here"); 

Answer 4

posso risolvere questo problema con un ingresso nascosto :)

<input type="hidden" name="komutdosyasi" style="display: none;"> 
    <script src="/lib/aceeditor/src-min/ace.js" type="text/javascript" charset="utf-8"></script> 

<script> 
    var editor = ace.edit('editor'); 
     editor.session.setMode("ace/mode/batchfile"); 
     editor.setTheme("ace/theme/monokai"); 

    var input = $('input[name="komutdosyasi"]'); 
     editor.getSession().on("change", function() { 
     input.val(editor.getSession().getValue()); 
    }); 
</script>