How do I get value from ACE editor?

Question

I am using ACE editor for the first time. I have the below questions related to it.

1. How do I find the instance of ACE editor on the page? I don't want to maintain a global variable which will hold the editor instance. I need to find its instance on demand.

2. How to get and set its value?

I am open for suggestions for any better editor than ACE editor which will support almost all types of language/markup/css etc and highly integrated with jQuery.

Answer 1

To save the contents of the editor I placed a hidden input immediately before it, and initialized the editor like so:

    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);                         });     } 

When my form is submitted we get the editor value and copy it to the hidden input.

Answer 2

Per their API:

Markup:

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

Finding an instance:

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

Getting/Setting Values:

var code = editor.getValue();  editor.setValue("new code here"); 

Based on my experience, Ace is the best code editor I've seen. There are few others such as CodeMirror etc. but I found them to be less useful or difficult to integrate than Ace.

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

There is a paid one also which I haven't tried (and I can't remember for now). Will updated later if I can find it.