Gem Version Build Status Dependency Status Code Climate Coverage Status

Bootsy is a WYSIWYG solution for Rails based on Bootstrap-wysihtml5 which includes image uploads via CarrierWave.



  • Ruby 2.0 or 1.9.3;
  • ImageMagick or GraphicsMagick (for MiniMagick);
  • Rails 4.0;
  • Bootstrap 2.3 properly added to your application.


  1. Add Bootsy to your Gemfile:
gem 'bootsy'
  1. Run the bundle command to install it:
bundle install
  1. Run the install generator:
rails generate bootsy:install

It will include the javascripts and stylesheets in the assets pipeline, create the bootsy.rb initializer and add a copy of the english translations.

  1. Add and run migrations (if you're using ActiveRecord):
rake bootsy:install:migrations
rake db:migrate


Just call the brand new method bootsy_area in your FormBuilder instances, the same way you'd call the basic textarea method. Example:

<%= form_for(@post) do |f| %>
  <%= f.label :title %>
  <%= f.text_field :title %>

  <%= f.label :content %>
  <%= f.bootsy_area :content %>

  <%= f.submit %>
<% end %>

Bootsy will group the uploaded images as galleries and associate them to one of your models. For example, if you have a Post model and you want to use bootsy_area with it, then you should include the Bootsy::Container module:

class Post < ActiveRecord::Base
  include Bootsy::Container

  attr_accessible :content, :title

Don't forget to ensure the association of new instances of your model with Bootsy image galleries. For strong_parameters, you must allow the parameter bootsy_image_gallery_id in your controllers. Example:

# Never trust parameters from the scary internet, only allow the white list through.
def post_params
  params.require(:post).permit(:title, :content, :bootsy_image_gallery_id)

Bootsy with Simple Form builders

Just use the brand new input type bootsy in your SimpleForm::FormBuilder instances, in the same way you would use the basic text input. Example:

<%= simple_form_for @post do |f| %>
  <%= f.input :title %>

  <%= f.input :content, as: :bootsy %>

  <%= f.button :submit %>
<% end %>

Editor options

It is possible to customize how the editor is displayed and its behavior by passing a hash editor_options to your bootsy_area.


You can enable/disable the buttons available on the editor. For example, if you want to disable the link and color buttons:

<%= f.bootsy_area :my_attribute, editor_options: {link: false, color: false} %>

Available options are: :font_styles, :emphasis, :lists, :html, :link, :image and :color.

Alert for usaved changes

By default, Bootsy alerts for unsaved changes if the user attempts to unload the window. You can disable this behaviour by doing:

<%= f.bootsy_area :my_attribute, editor_options: {alert_unsaved: false} %>


It's also possible to use Bootsy without the image upload feature. Just call bootsy_area in a form builder not associated to a Bootsy::Container model. This way users can insert images in their texts by providing an image url.


You can set the default editor options, image sizes available (small, medium, large and/or its original), its dimensions and more. Take a look at the initalizer file, /config/initializers/bootsy.rb.


Bootsy defines some i18n keys. The english translation is automatically added to your config/locales directory as bootsy.en.yml. You can follow that template in order to translate Bootsy to your language. You can find some examples here. It is also necessary to add a translation for Bootstrap-wysihtml5, the javascript editor, in your assets pipeline. Instructions here. If you are using the alert for unsaved changes, you have to define a translation for it as well. Just follow this example.


MIT License. Copyright 2013 Volmer Soares