Configure MarkItUpWidgets from a script after document ready

Rather than using inline scripts like the markitup_editor tag, just
apply some attributes to the widget, so we can locate it later in the
DOM.

This means jQuery doesn't have to be loaded before the MarkItUpWidget is
rendered on a page, all scripts can be loaded in the document foot.

Fixes: zsiciarz#25

markitup/static/markitup/django-markitup.js

@@ -0,0 +1,19 @@
+'use strict';
+(function($) {
+  $(function() {
+    $('.django-markitup-widget').each(function(index) {
+      var element = $(this);
+      var preview_url = this.getAttribute('data-preview-url');
+      var auto_preview = this.getAttribute('data-auto-preview') == '1';
+      if (!element.hasClass("markItUpEditor")) {
+        if (preview_url) {
+          mySettings["previewParserPath"] = preview_url;
+        }
+        element.markItUp(mySettings);
+      }
+      if (auto_preview) {
+        $('a[title="Preview"]').trigger('mouseup');
+      }
+    });
+  });
+})(jQuery || django.jQuery);

markitup/widgets.py

@@ -3,9 +3,7 @@
 import posixpath
 from django import forms
 from django.contrib.admin.widgets import AdminTextareaWidget
-from django.core.urlresolvers import NoReverseMatch, reverse
-from django.template.loader import render_to_string
-from django.utils.safestring import mark_safe
+from django.core.urlresolvers import NoReverseMatch, reverse_lazy
 from markitup import settings
 from markitup.util import absolute_url
 
@@ -55,36 +53,33 @@ def __init__(self, attrs=None,
         if auto_preview is None:
             auto_preview = settings.MARKITUP_AUTO_PREVIEW
         self.auto_preview = auto_preview
+
+        try:
+            preview_url = reverse_lazy('markitup_preview')
+        except NoReverseMatch:
+            preview_url = ""
+
+        attrs = attrs or {}
+        classes = attrs.get('class', '').split()
+        attrs['class'] = ' '.join(classes + ['django-markitup-widget'])
+        attrs['data-preview-url'] = preview_url
+        if auto_preview:
+            attrs['data-auto-preview'] = '1'
+
         super(MarkItUpWidget, self).__init__(attrs)
 
     def _media(self):
         js_media = [absolute_url(settings.JQUERY_URL)] if settings.JQUERY_URL is not None else []
         js_media = js_media + [absolute_url('markitup/ajax_csrf.js'),
                                absolute_url('markitup/jquery.markitup.js'),
-                               posixpath.join(self.miu_set, 'set.js')]
+                               posixpath.join(self.miu_set, 'set.js'),
+                               absolute_url('markitup/django-markitup.js')]
         return forms.Media(
             css={'screen': (posixpath.join(self.miu_skin, 'style.css'),
                             posixpath.join(self.miu_set, 'style.css'))},
             js=js_media)
     media = property(_media)
 
-    def render(self, name, value, attrs=None):
-        html = super(MarkItUpWidget, self).render(name, value, attrs)
-
-        final_attrs = self.build_attrs(attrs)
-
-        try:
-            preview_url = reverse('markitup_preview')
-        except NoReverseMatch:
-            preview_url = ""
-
-        html += render_to_string('markitup/editor.html',
-                                 {'textarea_id': final_attrs['id'],
-                                 'AUTO_PREVIEW': self.auto_preview,
-                                 'preview_url': preview_url})
-
-        return mark_safe(html)
-
 
 class AdminMarkItUpWidget(MarkItUpWidget, AdminTextareaWidget):
     """