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>

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>