How do I make a textarea an ACE editor?

javascript textarea ace-editor
Paul picture Paul · Jun 22, 2011 · Viewed 60.6k times · Source

I'd like to be able to convert specific textareas on a page to be ACE editors.

Does anyone have any pointers please?

EDIT:

I have the the editor.html file working with one textarea, but as soon as I add a second, the second isn't converted to an editor.

EDIT 2:

I decided to scrap the idea of having several, and instead open one up in a new window. My new predicament is that when I hide() and show() the textarea, the display goes awry. Any ideas?

Answer

installero picture installero · Nov 2, 2011

As far as I understood the idea of Ace, you shouldn't make a textarea an Ace editor itself. You should create an additional div and update textarea using .getSession() function instead.

html

<textarea name="description"/>
<div id="description"/>

js

var editor = ace.edit("description");
var textarea = $('textarea[name="description"]').hide();
editor.getSession().setValue(textarea.val());
editor.getSession().on('change', function(){
  textarea.val(editor.getSession().getValue());
});

or just call

textarea.val(editor.getSession().getValue());

only when you submit the form with the given textarea. I'm not sure whether this is the right way to use Ace, but it's the way it is used on GitHub.

Related questions

Creating a textarea with auto-resize

There was another thread about this, which I've tried. But there is one problem: the textarea doesn't shrink if you delete the content. I can't find any way to shrink it to the correct size - the clientHeight value comes …

Read More
How to add line breaks to an HTML textarea?

I’m editing a <textarea> with JavaScript. The problem is that when I make line breaks in it, they won’t display. How can I do this? I’m getting the value to write a function, but it …

Read More
how to get the value of a textarea in jquery?

i have this form and im trying to get the value from the text area. for some reason it doesn't want to. <form action="/profile/index/sendmessage" method="post" enctype="application/x-www-form-urlencoded"> <div class="upload_form"> &…

Read More