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

Suggested Improvement:

Always load the latest ACE package (keep in mind the inherent risks of doing this as it could break your app if you have a lot of custom settings)

Use Unpkg.com

Before:
<script src="//d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js"></script>

After:
<script src="//unpkg.com/ace-builds/src-min-noconflict/ace.js"></script>

Thank you for this. I got this working in my Bubble app. A few changes I had to make:

1. I had to store the ace.js file in my Bubble app
2. Bubble doesn't let me specify data-editor="xml" as part of the output so I removed that from the JS
3. I commented out line 18 so that I could verify that my textarea would have the same content as the div (// textarea.css('display', 'none');)
4. I used unix4you2 suggestion to use the onchange event (link)

Other than above, it worked great for me! Here is all the JS I used:

NOTE: If you use the code below, see my notes above, but also uncomment line 18 after you confirm its working

<script src="ace.js"></script>

<script>
    // Hook up ACE editor to all textareas with data-editor attribute
    $(function () {
        $('textarea').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(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...
           editor.getSession().on('change', function(){
  				textarea.val(editor.getSession().getValue());
			});
        });
    });
</script>