Bootsy
Bootsy is a WYSIWYG editor for Rails based on
Bootstrap-wysihtml5 with image uploads using
CarrierWave.
Live demo
Requirements
- ImageMagick or GraphicsMagick (for MiniMagick);
- Bootstrap 3 fully installed in your app.
Installation
- Add Bootsy to your Gemfile and
bundle install
it:
gem 'bootsy'
bundle install
- Mount Bootsy at the beginning of your
config/routes.rb
:
Rails.application.routes.draw do
mount Bootsy::Engine => '/bootsy', as: 'bootsy'
...
end
- Require Bootsy in the asset pipeline:
In your app/assets/javascripts/application.js
, put this after
requiring jQuery and Bootstrap:
In your app/assets/stylesheets/application.css
, put this line after
requiring Bootstrap:
*= require bootsy
- Add and run migrations:
bundle exec rake bootsy:install:migrations
bundle exec rake db:migrate
Usage
Just call bootsy_area
in your FormBuilder
instances, the
same way you'd call textarea
. 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 instance, if you have a Post
model and you want to use bootsy_area
with it, you must include the Bootsy::Container
module:
class Post < ActiveRecord::Base
include Bootsy::Container
end
Don't forget to ensure the association between your model objects with Bootsy
image galleries. For strong_parameters
, you must whitelist the bootsy_image_gallery_id
parameter
in your controller:
private
def post_params
params.require(:post).permit(:title, :content, :bootsy_image_gallery_id)
end
You can use bootsy
as an input type in SimpleForm::FormBuilder
instances. Example:
<%= simple_form_for @post do |f| %>
<%= f.input :title %>
<%= f.input :content, as: :bootsy %>
<%= f.button :submit %>
<% end %>
Editor options
You can customize Bootsy through a hash of editor_options
:
Enable/disable features
You can enable and disable features as you like. For instance, if you don't want link and color features:
<%= f.bootsy_area :my_attribute, editor_options: { link: false, color: false } %>
Available options are: :blockquote
, :font_styles
, :emphasis
, :lists
, :html
, :link
, :image
and :color
.
Alert of unsaved changes
By default Bootsy alerts the user about unsaved changes if the page is closed or reloaded. You can disable
this feature with:
<%= f.bootsy_area :my_attribute, editor_options: { alert_unsaved: false } %>
Uploads
If you don't want to have image uploads, just call bootsy_area
in a form builder not
associated to a Bootsy::Container
model. This way users will still be able to insert
images in the text area using an external image URL.
Configuration
You can set the default editor options, image sizes available (small, medium,
large and/or its original), dimensions and more. Create a copy of Bootsy's initalizer
file
in your config/initializers
and feel free to uncomment and change the options
as you like.
I18n
You can translate Bootsy to your own language. Simply create a locale file for
it in your config/locales
directory similar to Bootsy's master English file.
You also need to translate Bootsy on the JavaScript side. Just follow
this example.
Bootsy will try to guess the locale based on the lang
attribute of the page's <html>
tag.
You can set the locale directly by setting a data-bootsy-locale
attribute on your <textarea>
.
License
MIT License. Copyright 2012-2017 Volmer Campos Soares