How do I make a textarea an ACE editor?

Question

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 1

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.

Answer 2

Duncansmart has a pretty awesome solution on his github page, progressive-ace which demonstrates one simple way to hook up an ACE editor to your page.

Basically we get all <textarea> elements with the data-editor attribute and convert each to an ACE editor. The example also sets some properties which you should customize to your liking, and demonstrates how you can use data attributes to set properties per element like showing and hiding the gutter with data-gutter.

// Hook up ACE editor to all textareas with data-editor attribute  $(function() {    $('textarea[data-editor]').each(function() {      var textarea = $(this);      var mode = textarea.data('editor');      var editDiv = $('<div>', {        position: 'absolute',        width: textarea.width(),        height: textarea.height(),        'class': textarea.attr('class')      }).insertBefore(textarea);      textarea.css('display', 'none');      var editor = ace.edit(editDiv[0]);      editor.renderer.setShowGutter(textarea.data('gutter'));      editor.getSession().setValue(textarea.val());      editor.getSession().setMode("ace/mode/" + mode);      editor.setTheme("ace/theme/idle_fingers");        // copy back to textarea on form submit...      textarea.closest('form').submit(function() {        textarea.val(editor.getSession().getValue());      })    });  });

textarea {    width: 100%;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.9/ace.js"></script>  <textarea name="my-xml-editor" data-editor="xml" data-gutter="1" rows="15"></textarea>  <br>  <textarea name="my-markdown-editor" data-editor="markdown" data-gutter="0" rows="15"></textarea>