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>

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>