How do I make a textarea an ACE editor?

user_123138 0
Viewed 65279

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?

ace-editor textarea javascript
5 Answers

For anyone that just wants a minimal, working example of using Ace from the CDN:

<!DOCTYPE html>
<html lang="en">

<body style="margin:0">
  <div id="editor">function () { 
  console.log('this is a demo, try typing!')
}
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.1.01/ace.js" type="text/javascript" charset="utf-8"></script>
  <script>
    var editor = ace.edit("editor");
    editor.setTheme("ace/theme/monokai");
    editor.getSession().setMode("ace/mode/javascript");
    document.getElementById("editor").style.height = "120px";
  </script>
</body>

</html>

user_55397150
Related