CODEWITHSUNDEEP
javascriptjqueryace-editor
ShankarSangoli
ShankarSangoli

Reputation: 69905

How do I get value from ACE editor?

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.

Upvotes: 78

Views: 73286

Answers (8)

Saqy G
Saqy G

Reputation: 806

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;

Upvotes: 1

gal007
gal007

Reputation: 7192

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

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

Which I can manipulate later.

Upvotes: 0

nofoobar
nofoobar

Reputation: 3215

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>

Upvotes: 0

Nithish
Nithish

Reputation: 1

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

This would return the current editor object

var code = editor.getValue();

This would return the text within the editor.

Upvotes: 0

Mrchief
Mrchief

Reputation: 76208

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.

Upvotes: 158

Sel&#231;ukDERE
Sel&#231;ukDERE

Reputation: 87

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>

Upvotes: 8

Sairam Venkata
Sairam Venkata

Reputation: 356

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

Upvotes: 7

Ben Foster
Ben Foster

Reputation: 34800

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.

Upvotes: 18

Related Questions