https://github.com/rcode5/image-wysiwyg-sample

Sample Sinatra/TwitterBootstrap app with Bootstrap-wysihtml5 and custom image dialog
https://github.com/rcode5/image-wysiwyg-sample

Last synced: 13 days ago
JSON representation

Sample Sinatra/TwitterBootstrap app with Bootstrap-wysihtml5 and custom image dialog

• Host: GitHub
• URL: https://github.com/rcode5/image-wysiwyg-sample
• Owner: rcode5
• Created: 2012-11-08T16:06:09.000Z (about 12 years ago)
• Default Branch: master
• Last Pushed: 2013-11-26T11:19:07.000Z (almost 11 years ago)
• Last Synced: 2024-08-01T22:53:48.320Z (3 months ago)
• Language: JavaScript
• Size: 393 KB
• Stars: 32
• Watchers: 4
• Forks: 9
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
Bootstrap Wysihtml5 with Custom Image Insert

====

This sample app (powered by [Sinatra](http://www.sinatrarb.com/) and [Twitter Bootstrap](http://twitter.github.com/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](https://github.com/jhollingworth/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/](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](https://github.com/rcode5/image-wysiwyg-sample/blob/master/static/custom_image_wysihtml5.js).  That's where the magic happens.

Recent updates based on code from [Bass Jobsen](https://github.com/bassjobsen) 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](http://rcode5.wordpress.com/2012/11/01/custom-image-upload-modal-with-bootstrap-wysihtml5/) to get into the details of the code.

Check the [demo app](http://wysihtml5-images.herokuapp.com/) to get more about how to use/install this feature.

### TODOs 

* Build this up as a package that is easy to integrate in your app

### Contribute

* feel free to fork this project and add/modify.  submit a pull request if you make exciting improvements.