How do I get value from ACE editor?

77
votes

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.

8
javascriptjqueryace-editor
Oh, what a mess. The editor now known as "ace" powers the Cloud9 IDE (cloud9-ide). The editor engine was formerly known as Skywriter (skywriter), and that was formerly known as Bespin (bespin, embedded-bespin). Annoyingly, the current ace tag is not for the editor. - Charles
@Charles: And your point is...? - Mrchief
@Mrchief, four tags for one thing is a badness. Thanks for beating me to the new tag creation, though. Unless you get to it before me, I'll be going through the other tags and adding the new one to relevant questions. - Charles
@Charles: May or may not be. ace editor being a Javascript thingy, needs the JS tag. Since the OP is also looking for integration with jQuery, jQuery also makes sense. I removed the incorrect 'ace' tag. - Mrchief

8 Answers

147
votes

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.

17
votes

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.

8
votes

I solve this problem with an 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>
7
votes

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

In the javascript section, after loading ace.js,

First step is to find your editor's instance as below.

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

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

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

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

editor.getSession().setValue("write your code here");
0
votes
var editor = AceEditor.getCurrentFileEditor("MyEditor");

This would return the current editor object

var code = editor.getValue();

This would return the text within the editor.

0
votes

Use the following code to get the value of ace editor, html will have

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

then 

<script >
 var some = $('#aceEditor');

 some.keyup(function() {
  var code = editor.getSession().getValue();
  $.ajax({
       type: "POST",
       url: "{% url 'creatd-new' %}",
       data: {'code':code},
       success: function (data) {
           console.log("foo");
       }
     });
     }
      </script>
0
votes

I added a listener to the load event, and then I get the instance:

onLoad={(editor) => {
    this.sourceEditor=editor;
}}

Which I can manipulate later.

0
votes

In react its simple add line below:

onChange={(value) => handleAceText(value)}

import React from 'react';
import ReactAce from 'react-ace-editor';

const CodeEditor = ({ handleAceText, aceRef }) => {
  return (
    <ReactAce
      mode='html'
      theme='eclipse'
      setReadOnly={false}
      onChange={(value) => handleAceText(value)}
      style={{ height: '300px' }}
      ref={aceRef}
    />
  );
};

export default CodeEditor;