Quilljs2::Rails

[Note] This is a maintained fork of the original quilljs-rails by Abhinav Mathur, updated to support Quill 2.x (via CDN recommended).

This gem adds a Quill rich editor to an existing text field or text area. Quill - Your powerful, rich text editor

Add this line to your application's Gemfile:

gem 'quilljs2-rails'

And then execute:

$ bundle

Add these lines in the head section of application.html.erb

<script src="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.js"></script>
<link href="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.snow.css" rel="stylesheet"> 

Then add this line to your application.js file

  //= require quill.global

Add the class quill_container to the desired text_field or text_area

Eg. with bootstrap_form_for,

<%= f.text_field :title, label: 'Title', type: 'text', class: 'quill_container' %>

With Simple form,

<%= f.input :title, input_html: { class: 'quill_container' } %>

Quilljs loads with these defaults :-

        theme: 'snow',
        modules: {
            toolbar: [
                [{ 'header': [1, 2, 3, false] }],
                [{ 'color': [] }, { 'background': [] }],
                ['bold', 'italic', 'underline', 'strike'],
                ['blockquote', 'code-block'],
                [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                [{ 'indent': '-1'}, { 'indent': '+1' }],
                ['clean']
            ]
        }
    

In order to customize your defaults, this gem comes with a global javascript object. You can setup the global object(in a js file) like this :-

var defaults = {
        theme: 'snow',
        modules: {
            toolbar: [
                [{ 'header': [1, 2, 3, false] }],
                [{ 'color': [] }, { 'background': [] }],
                ['bold', 'italic', 'underline', 'strike'],
                ['blockquote', 'code-block'],
                [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                [{ 'indent': '-1'}, { 'indent': '+1' }],
                ['clean']
            ]
        }
    };

//This is the global config object
Quilljs.setDefaults(defaults)

Add these lines to application.js

//= require quill.min
//= require quill.global

Add these lines to application.scss(or application.css if you are not using sass)

*= require quill.snow

This gem comes with the core, snow(default) and bubble themes. For eg. to use the bubble theme remove other quill themes and add

*= require quill.bubble

Make sure to add theme: 'bubble' in the Quilljs.setDefaults setting as explained above.

Note: The bundled local assets have been updated to Quill 2.0.3. You can use them directly via Sprockets (see "From the gem"), although using a CDN is still recommended for most apps. For CDN, use jsDelivr (example above) or unpkg for slab/quill@2.0.3.

• The initializer listens for ready, page:change, turbolinks:load, and turbo:load events.
• Editors are initialized per field using a data attribute, so repeated navigations or partial updates will not double-initialize existing editors.
• Ensure you are not including any old Quill 1.x assets in your app. Remove old CDN links or packs that could override the 2.0.3 assets.

This gem can also be used in conjuction with bootstrap maxlength.

Starting from the top of the page, each quill editor instance is attached to the window object. The first quill editor instance can be accessed by window['quill-container-0'] and the second one by window['quill-container-1'] and so on.

To install this gem onto your local machine, run bundle exec rake install. To release a new version, update the version number in version.rb, and then run bundle exec rake release, which will create a git tag for the version, push git commits and tags, and push the .gem file to rubygems.org.

This gem is a fork of https://github.com/abhinavmathur/quilljs-rails. Bug reports and pull requests are welcome on GitHub.

The gem is available as open source under the terms of the MIT License.