How do I get value from ACE editor?
JavascriptJqueryAce EditorJavascript Problem Overview
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
.
Javascript Solutions
Solution 1 - Javascript
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.
Solution 2 - Javascript
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.
Solution 3 - Javascript
I solve this problem with an hidden input :)
<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>
Solution 4 - Javascript
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");
Solution 5 - Javascript
var editor = AceEditor.getCurrentFileEditor("MyEditor");
This would return the current editor object
var code = editor.getValue();
This would return the text within the editor.
Solution 6 - Javascript
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>
Solution 7 - Javascript
I added a listener to the load event, and then I get the instance:
onLoad={(editor) => {
this.sourceEditor=editor;
}}
Which I can manipulate later.
Solution 8 - Javascript
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;