{"id":13500703,"url":"https://github.com/rcode5/image-wysiwyg-sample","last_synced_at":"2025-03-29T07:31:28.164Z","repository":{"id":5408543,"uuid":"6598935","full_name":"rcode5/image-wysiwyg-sample","owner":"rcode5","description":"Sample Sinatra/TwitterBootstrap app with Bootstrap-wysihtml5 and custom image dialog","archived":false,"fork":false,"pushed_at":"2013-11-26T11:19:07.000Z","size":402,"stargazers_count":32,"open_issues_count":2,"forks_count":9,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-10-31T19:37:23.638Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rcode5.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2012-11-08T16:06:09.000Z","updated_at":"2020-09-24T11:40:56.000Z","dependencies_parsed_at":"2022-09-22T00:24:21.102Z","dependency_job_id":null,"html_url":"https://github.com/rcode5/image-wysiwyg-sample","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rcode5%2Fimage-wysiwyg-sample","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rcode5%2Fimage-wysiwyg-sample/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rcode5%2Fimage-wysiwyg-sample/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rcode5%2Fimage-wysiwyg-sample/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rcode5","download_url":"https://codeload.github.com/rcode5/image-wysiwyg-sample/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246155994,"owners_count":20732355,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T22:01:10.801Z","updated_at":"2025-03-29T07:31:27.780Z","avatar_url":"https://github.com/rcode5.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"Bootstrap Wysihtml5 with Custom Image Insert\n====\n\nThis 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.\n\nTo see it in action, \n\n    git clone git@github.com:rcode5/image-wysiwyg-sample.git\n    cd image-wysiwyg-sample\n    bundle\n    bundle exec foreman start\n\nOr, try out the version of this code hosted on Heroku: [http://wysihtml5-images.herokuapp.com/](http://wysihtml5-images.herokuapp.com/)\n\nMany resources are pulled from CDN to keep the repo small.\nThe 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.\n\nRecent 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.\n\nRead 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.\n\nCheck the [demo app](http://wysihtml5-images.herokuapp.com/) to get more about how to use/install this feature.\n\n### TODOs \n\n* Build this up as a package that is easy to integrate in your app\n\n\n### Contribute\n\n* feel free to fork this project and add/modify.  submit a pull request if you make exciting improvements.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frcode5%2Fimage-wysiwyg-sample","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frcode5%2Fimage-wysiwyg-sample","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frcode5%2Fimage-wysiwyg-sample/lists"}