Code Monkey home page Code Monkey logo

bootsy's Introduction

Bootsy

Gem Version Build Status Dependency Status Code Climate Coverage Status

Bootsy is a WYSIWYG editor for Rails based on Bootstrap-wysihtml5 with image uploads using CarrierWave.

Live demo

Requirements

  • Ruby 2 or 1.9.3;
  • ImageMagick or GraphicsMagick (for MiniMagick);
  • Rails 4;
  • Bootstrap 3 fully installed in your app.

Installation

1. Add Bootsy to your Gemfile:

gem 'bootsy'

2. Run the bundle command to install it:

bundle install

3. 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.

4. Add and run migrations:

rake bootsy:install:migrations
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: :font_styles, :emphasis, :lists, :html, :link, :image and :color.

Alert of usaved 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. Take a look at Bootsy's initalizer file /config/initializers/bootsy.rb in your app and feel free to uncomment and change the options as you like.

I18n

Bootsy defines some i18n keys. English translations are added by default to your config/locales directory as bootsy.en.yml. You can use it as a template to translate Bootsy to your language. Here are some examples. You also need to translate Bootstrap-wysihtml5, the underlying javascript editor. Instructions here. Unless you have disabled it, it's also nice to translate the alert message of unsaved changes. Just follow this example.

License

MIT License. Copyright 2012-2014 Volmer Soares

bootsy's People

Contributors

ctattory avatar harrykiselev avatar rzane avatar volmer avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.