This sample app (powered by Sinatra and Twitter Bootstrap demonstrates how with a small-ish amount of custom javascript (see static/custom_image_wysihtml5.js), you can add a nice image chooser dialog to the Bootstrap-wysihtml5 wysiwyg editor.
To see it in action,
git clone [email protected]:rcode5/image-wysiwyg-sample.git
cd image-wysiwyg-sample
bundle
bundle exec foreman start
Or, try out the version of this code hosted on Heroku: http://wysihtml5-images.herokuapp.com/
Many resources are pulled from CDN to keep the repo small. The key file, if you're trying to customize your own, is the custom_image_wysihtml5.js. That's where the magic happens.
Recent updates based on code from Bass Jobsen include a method of uploading an image in the dialog (leveraging jQuery.upload). This demo app doesn't actually upload anything but fakes out the endpoint that would receive the upload. It should be enough to show you how to do it.
Read more on the rcode5 blog to get into the details of the code.
Check the demo app to get more about how to use/install this feature.
- Build this up as a package that is easy to integrate in your app
- feel free to fork this project and add/modify. submit a pull request if you make exciting improvements.