Bootsy
Bootsy is a WYSIWYG solution for Rails based on Bootstrap-wysihtml5 which includes image uploads via CarrierWave.
Requirements
- Ruby
2.0
or1.9.3
; - ImageMagick or GraphicsMagick (for MiniMagick);
- Rails
4.0
; - Bootstrap
3
properly added to your application.
Installation
Add Bootsy to your Gemfile:
gem 'bootsy'
Run the bundle command to install it:
bundle install
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.Add and run migrations (if you're using ActiveRecord):
rake bootsy:install:migrations rake db:migrate
Usage
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
end
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:
private
# 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)
end
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
.
Buttons
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} %>
Uploader
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.
Configuration
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
.
I18n
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.
License
MIT License. Copyright 2013 Volmer Soares