Aceify Script

aceify.js

/**
 * Allows you to aceify any element, though it's intended for textareas.
 * Useful for sites that insist on providing plain HTML textareas for entering structured data.
 * Based on  https://gist.github.com/duncansmart/5267653
 * 
 * Usage:
 *   $.getScript('https://cdn.rawgit.com/TikiTDO/6033a7e7d61ad59b8c2c/raw/0765886a28499e923648a940be963dabdc0161f0/aceify.js')
 *   $('textarea').aceify('markdown') // Defaults to javascript if not specified
 **/

$.getScript('//d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js')

$.fn.aceify = function (mode) {
  var origin = $(this);
 
  if (!mode) mode = 'javascript';

  var editDiv = $('<div>', {
      position: 'absolute',
      width: origin.width(),
      height: origin.height(),
      'class': origin.attr('class')
  }).insertBefore(origin);

  origin.css('visibility', 'hidden');

  var editor = ace.edit(editDiv[0]);
  editor.renderer.setShowGutter(false);
  editor.getSession().setValue(origin.val());
  editor.getSession().setMode("ace/mode/" + mode);
  editor.getSession().setTabSize(2)

  // Update origin
  editor.getSession().on('change', function () {
    origin.val(editor.getSession().getValue())
  });
}