Fork me on GitHub


This is a sample app showing how the customized image dialog could look. Try it by focusing on the text area (so there is a cursor showing), then click the image dialog button. Then click on an image to insert it into the editor. The insertion template (with the caption and horiz-rule) are defined in the customized javascript. You'll see a list of images (using images) It's pulling from a local endpoint called attachable_images which returns a list of images as json (hover for a sample entry). The data is used to populate a Javascript template for the image dialog.

use it in your app

  • Make sure your app includes the basic javascript requirements (jQuery, underscore, bootstrap-wysihtml5)
  • Add the bootstrap-wysihtml5 customizations and jqueryupload.js defined in this project custom_image_wysihtml5.js jqueryupload.js
  • Build endpoint to return (by AJAX) a list of available images (like /attachable_images is defined in app.rb)
  • Build endpoint to handle image upload (like /upload is defined in app.rb)
  • You're on your way

more detail/code

You can get the app from github with all the code. You can read more about the code details at rcode5.

This app is a simple Sinatra App. If you want to run it, check out the


  • Bass Jobsen who integrated a jQuery.upload implementation so that you can upload images in the dialog. I merged in his code from and added the Sinatra endpoint to fake uploads (for this demo app).