Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Integrating ACE Editor in a progressive way
<textarea name="my-xml-editor" data-editor="xml" rows="15"></textarea>
<textarea name="my-markdown-editor" data-editor="markdown" rows="15"></textarea>
<script src="//"></script>
// Hook up ACE editor to all textareas with data-editor attribute
$(function () {
$('textarea[data-editor]').each(function () {
var textarea = $(this);
var mode ='editor');
var editDiv = $('<div>', {
position: 'absolute',
width: textarea.width(),
height: textarea.height(),
'class': textarea.attr('class')
textarea.css('visibility', 'hidden');
var editor = ace.edit(editDiv[0]);
editor.getSession().setMode("ace/mode/" + mode);
// editor.setTheme("ace/theme/idle_fingers");
// copy back to textarea on form submit...
textarea.closest('form').submit(function () {
Copy link

billynoah commented Oct 22, 2013

This is super awesome. Thanks!

Copy link

mderazon commented Oct 28, 2013

very nice ! thanks

Copy link

eriko commented Apr 29, 2014

Thank you for this.

Copy link

alexsandro-xpt commented Aug 1, 2014

Perfect, for somebody test, see

Copy link

newtonlabs commented Aug 20, 2014

This is wonderful!

Copy link

KrlosWd commented Aug 22, 2014

Worked amazingly, I only needed to chage this line:
textarea.css('visibility', 'hidden');
for this:
textarea.css('display', 'none');

Copy link

kapsonic commented Sep 3, 2014

very good. it saved me lot of time.

Copy link

fabiopaiva commented Oct 30, 2014

suggest change
textarea.css('visibility', 'hidden');
for this:
textarea.css('display', 'none');

Copy link

midurad commented Nov 3, 2014

This is great. Thank you!

Copy link

jaime8111 commented Dec 29, 2014

Very nice,

Copy link

unix4you2 commented Jan 24, 2015

Hi guys.

Some times the value of textarea is not changed in the submit event, so was safer for me to replace last part for this code:

//Update the textarea control (This is the way used by github)
editor.getSession().on('change', function(){


Copy link

DiegoYungh commented Jul 5, 2015

I just implemented this on Wagtail as a enhancement for RawHTMLField
Simply brilliant! 👍

Copy link

FractalizeR commented Aug 11, 2015

Is there any need for <textarea> tags or we can do with simple <input type="hidden">?

Copy link

romeoonisim commented Jan 7, 2016

Awesome, thanks!

Copy link

jameset1024 commented Sep 14, 2016

Worked like a charm. Thank you.

Copy link

Naskalin commented May 13, 2017

Thank you, helped save time

Copy link

pachacamac commented Dec 12, 2017

Awesome! Exactly what I needed :)

Copy link

rogertangcn commented Nov 7, 2018

Thank you so much, this is the perfect solution i'm after.

Copy link

Cyb3rz3r0 commented Nov 27, 2018

Building a CMS and came across ACE as an alternative to wysiwyg editor summernote which is not exactly functional for coding... My problem I face was ace didn't appear for textarea after some searching I ended up here the rest will be history thanks man appreciate the work saved me a few days. Exactly what was needed!

Copy link

meeen commented Aug 8, 2020

is there an option to add number at the beginning of every line?

Copy link

dlinch commented Nov 18, 2020

is there an option to add number at the beginning of every line?

If you remove this line it will show the gutter with the line numberes.


Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment