Skip to content

Instantly share code, notes, and snippets.

Embed
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="//d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js"></script>
<script>
// 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('visibility', 'hidden');
var editor = ace.edit(editDiv[0]);
editor.renderer.setShowGutter(false);
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());
})
});
});
</script>
@billynoah
Copy link

billynoah commented Oct 22, 2013

This is super awesome. Thanks!

@mderazon
Copy link

mderazon commented Oct 28, 2013

very nice ! thanks

@eriko
Copy link

eriko commented Apr 29, 2014

Thank you for this.

@alexsandro-xpt
Copy link

alexsandro-xpt commented Aug 1, 2014

Perfect, for somebody test, see http://jsfiddle.net/YNxR9/

@newtonlabs
Copy link

newtonlabs commented Aug 20, 2014

This is wonderful!

@KrlosWd
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');

@kapsonic
Copy link

kapsonic commented Sep 3, 2014

very good. it saved me lot of time.

@fabiopaiva
Copy link

fabiopaiva commented Oct 30, 2014

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

@midurad
Copy link

midurad commented Nov 3, 2014

This is great. Thank you!

@jaime8111
Copy link

jaime8111 commented Dec 29, 2014

Very nice,
Thanks!

@unix4you2
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(){
  textarea.val(editor.getSession().getValue());
});

Regards

@DiegoYungh
Copy link

DiegoYungh commented Jul 5, 2015

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

@FractalizeR
Copy link

FractalizeR commented Aug 11, 2015

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

@romeoonisim
Copy link

romeoonisim commented Jan 7, 2016

Awesome, thanks!

@jameset1024
Copy link

jameset1024 commented Sep 14, 2016

Worked like a charm. Thank you.

@Naskalin
Copy link

Naskalin commented May 13, 2017

Thank you, helped save time

@pachacamac
Copy link

pachacamac commented Dec 12, 2017

Awesome! Exactly what I needed :)

@rogertangcn
Copy link

rogertangcn commented Nov 7, 2018

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

@Cyb3rz3r0
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!

@meeen
Copy link

meeen commented Aug 8, 2020

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

@dlinch
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.

editor.renderer.setShowGutter(false);

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