Custom Image Upload Modal with Bootstrap-Wysihtml5

My current project is, among other things, a custom CMS.

In several places, we needed a Wysiwyg editor with an image uploader that would pull from our application’s media library.
We started off with bootstrap-wysihtml5. This project is a nice Bootstrap wrapper on wysihtml5 which is an open source html5 rich text editor project. Out of the box, the bootstrap-wysihtml5 works nicely. But it’s image insert functionality simply asks for an URL which it wraps in an image tag. We wanted it to pull that URL from our in-application library of images.

To achieve this, I modified the editor to allow inserting custom templates for the modal, and hooked up an Ajax call (at /attachable_images) that would pull the images (as json) allowing the dialog for inserting images to display and choose from our image library. The changes that allow this customization have been merged into the project (http://jhollingworth.github.com/bootstrap-wysihtml5/). To enable this, we added the following on our side:

First, we setup the customTemplates that we want to use for the image modal:

// override options
var wysiwygOptions = {
  customTemplates: {
    image: function(locale) {
      return "<li>" +
        "<div class='bootstrap-wysihtml5-insert-image-modal modal hide fade'>" +
        "<div class='modal-header'>" +
        "<a class='close' data-dismiss='modal'>&times;</a>" +
        "<h3>" + locale.image.insert + "</h3>" +
        "</div>" +
        "<div class='modal-body'>" +
        "<div class='chooser_wrapper'>" +
        "<table class='image_chooser images'></table>" +
        "</div>" +
        "</div>" +
        "<div class='modal-footer'>" +
        "<a href='#' class='btn' data-dismiss='modal'>" + locale.image.cancel + "</a>" +
        "</div>" +
        "</div>" +
        "<a class='btn' data-wysihtml5-command='insertImage' title='" + locale.image.insert + "'><i class='icon-picture'></i></a>" +
        "</li>";
    }
  }
};

These options are used when you fire up the editor:

$(function() {
 $('textarea.wysiwyg').each(function() {
    $(this).wysihtml5($.extend(wysiwygOptions, {html:true, color:false});
  });
});

Then we override the insertImage functions defined in the editor.

var xhrFetchingImages;

wysiHelpers = {
  getImageTemplate: function() {
    /* this is what goes in the wysiwyg content after the image has been chosen */
    var tmpl;
    var imgEntry = "<img src='<%= url %>' alt='<%= caption %>'>";
    tmpl = _.template("<div class='shrink_wrap'>" +
                      imgEntry +
                      "</div>" +
                      "<p class='credit'><%= caption %></p>" +
                      "<hr>");
    return tmpl;
  }
}
bootWysiOverrides: {
  initInsertImage: function(toolbar) {
    var self = this;
    var insertImageModal = toolbar.find('.bootstrap-wysihtml5-insert-image-modal');
    var urlInput = insertImageModal.find('.bootstrap-wysihtml5-insert-image-url');
    var insertButton = insertImageModal.find('a.btn-primary');
    var initialValue = urlInput.val();
  
    var chooser = insertImageModal.find('.image_chooser.images'),
    /* this is the template we put in the image dialog */
    var optionTemplate = _.template(
      "<tr><td data-type='image' data-caption='<%= title %>' data-url='<%= urls.content %>'>" +
        "<img src='<%= urls.icon %>'>"+
        "<div class='type'>Image</div>" +
        "<div class='title'><%= title %></div>" + 
        "<div class='caption'><%= caption %></div>" + 
        "</td></tr>");

    var helpers = wysiHelpers;
    
    // populate chooser
    // TODO: this get's called once for each wysiwyg on the page.  we could 
    //       be smarter and cache the results after call 1 and use them later.
    if (!xhrFetchingImages) {
      $.ajax({
        url:'/attachable_images',
        success: function(data) {
          xhrFetchingImages = false;
          // populate dropdowns
          _.each(data, function(img) {
            chooser.append(optionTemplate(img));
          });
        }
      });
    }

    var insertImage = function(imageData) {
      if(imageData.url) {
        var clz = 'image_container';
        var doc = self.editor.composer.doc;
        var tmpl = helpers.getImageTemplate(!!imageData.caption);
        var chunk = tmpl(imageData);
        self.editor.composer.commands.exec("insertHTML", chunk);
      }
    };
    
    chooser.on('click', 'td', function(ev) {
      var $row = $(ev.currentTarget);
      insertImage($row.data());
      insertImageModal.modal('hide');
    });
    
    insertImageModal.on('hide', function() {
      self.editor.currentView.element.focus();
    });
    
    toolbar.find('a[data-wysihtml5-command=insertImage]').click(function() {
      var activeButton = $(this).hasClass("wysihtml5-command-active");
      
      if (!activeButton) {
        insertImageModal.modal('show');
        insertImageModal.on('click.dismiss.modal', '[data-dismiss="modal"]', function(e) {
          e.stopPropagation();
        });
        return false;
      }
      else {
        return true;
      }
    });
  }
};

$.extend($.fn.wysihtml5.Constructor.prototype, bootWysiOverrides);

Now we’re ready to roll. This code will now populate the chooser table with a list of images that come from our system (by way of the Ajax call) and the optionTemplate template. When you click on the image, it’s inserted into the editor window using the DOM defined in the getImageTemplate (which is customized depending on whether or not the image has a caption).

Though the overrides may appear a bit complex, you’ll notice that they look a lot like the original bootstrap-wysihtml5 source where he handles inserting an image – the primary mod is populating the dialog with something more than a simple input box.

Another thing to notice, in the initial options, we add the customStyles and customTags entries. These are to prevent the HTML cleanser from ripping out styles and tags that we are using in our new image DOM. Without those definitions, your new elements will get cleansed – possibly to the point of deletion.

With these simple-ish modifications, we were able to get our application images into the content blocks with a very nice UI.

See it in action (and get the source code) here.
Much thanks to James Hollingworth for merging in my pull requests so I can share this enhancement with others.

UPDATE (4/11/2013): it looks like someone’s done one better (at first glance). You may want to check out http://mindmup.github.io/bootstrap-wysiwyg/. He’s got a nice image upload image picker right out of the gate.