Skip to content

Instantly share code, notes, and snippets.

@masukomi
Forked from duncansmart/progressive-ace.htm
Created December 26, 2013 15:37
Show Gist options
  • Save masukomi/8135130 to your computer and use it in GitHub Desktop.
Save masukomi/8135130 to your computer and use it in GitHub Desktop.
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment