Skip to content

Instantly share code, notes, and snippets.

@duncansmart
Created March 28, 2013 23:29
Show Gist options
  • Star 95 You must be signed in to star a gist
  • Fork 23 You must be signed in to fork a gist
  • Save duncansmart/5267653 to your computer and use it in GitHub Desktop.
Save duncansmart/5267653 to your computer and use it in GitHub Desktop.
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>
@midurad
Copy link

midurad commented Nov 3, 2014

This is great. Thank you!

@jaime8111
Copy link

Very nice,
Thanks!

@unix4you2
Copy link

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

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

@FractalizeR
Copy link

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

@romeoonisim
Copy link

Awesome, thanks!

@jameset1024
Copy link

Worked like a charm. Thank you.

@Naskalin
Copy link

Thank you, helped save time

@pachacamac
Copy link

Awesome! Exactly what I needed :)

@rogertangcn
Copy link

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

@Cyb3rz3r0
Copy link

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

@mayurjobanputra
Copy link

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>

@mayurjobanputra
Copy link

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>

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