Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

bootsy

Package Overview
Dependencies
Maintainers
1
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

bootsy

  • 2.4.0
  • Rubygems
  • Socket score

Version published
Maintainers
1
Created
Source

Bootsy

Gem Version Build Status Dependency Status Code Climate

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

  1. Add Bootsy to your Gemfile and bundle install it:
gem 'bootsy'
bundle install
  1. Mount Bootsy at the beginning of your config/routes.rb:
Rails.application.routes.draw do
  mount Bootsy::Engine => '/bootsy', as: 'bootsy'

  ...

end
  1. Require Bootsy in the asset pipeline:

In your app/assets/javascripts/application.js, put this after requiring jQuery and Bootstrap:

//= require bootsy

In your app/assets/stylesheets/application.css, put this line after requiring Bootstrap:

*= require bootsy
  1. 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

Bootsy with Simple Form builders

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

FAQs

Package last updated on 03 Mar 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc