How to get value from ACE editor?

Question

I am using the ACE editor for the first time. I have the following questions related to this.

• How to find an ACE editor instance on a page? I do not want to save the global variable that will contain the editor instance. I need to find a copy of it on demand.

• How to get and set its value?

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

Answer 1

For their API :

Markup:

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

Instance Search:

 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 several others, such as CodeMirror , etc., but I find them less useful or difficult to integrate than Ace.

Here is a Wiki page for comparing such editors .

There is a paid one that I have not tried (and still can not remember). Will be updated later if I can find it.

Answer 2

To save the contents of the editor, I placed the hidden input directly in front of it and initialized the editor as follows:

  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 will get the value of the editor and copy it to the hidden input.

Answer 3

I solve this problem with hidden input :)

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

Answer 4

Suppose we have an initialized ace editor on a tag in html. EX: <div id="MyAceEditor">this the editor place holder</div> .

In javascript section after ace.js loading

The first step is to find a copy of your editor, as shown below.

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

To get the value from the ace editor, use the getValue () method, as shown below.

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

To set the value in the ace editor (to insert some code into the editor), use the setValue() method, as shown below.

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

Answer 5

 var editor = AceEditor.getCurrentFileEditor("MyEditor"); 

This will return the current editor object.

 var code = editor.getValue(); 

This will return the text in the editor.