Integrating ACE Editor in a progressive way

progressive-ace.htm

<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>

This is super awesome. Thanks!

very nice ! thanks

Thank you for this.

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

This is wonderful!

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

very good. it saved me lot of time.

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

This is great. Thank you!

Very nice,
Thanks!

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

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

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

Awesome, thanks!

Worked like a charm. Thank you.

Thank you, helped save time

Awesome! Exactly what I needed :)

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

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!

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

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);