A long-lived project that still receives updates
An Active Admin plugin to use Quill Rich Text Editor
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
 Dependencies

Development

~> 2.4

Runtime

>= 2.9, < 4
 Project Readme

ActiveAdmin Quill Editor

gem version gem downloads linters specs Rails 6.1 specs Rails 7.0

An Active Admin plugin to use Quill Rich Text Editor in form fields.

screenshot

Please ⭐ if you like it.

Install

NOTE: Ruby 2.7 is supported until version 1.1.0

After installing Active Admin, add to your Gemfile: gem 'activeadmin_quill_editor' (and execute bundle)

If you installed Active Admin without Webpacker support (default for now):

  • Add a SASS/SCSS gem to your Gemfile (ex. gem 'sassc')
  • Add at the end of your Active Admin styles (app/assets/stylesheets/active_admin.scss):
@import 'activeadmin/quill_editor/quill.snow';
@import 'activeadmin/quill_editor_input';
  • Add at the end of your Active Admin javascripts (app/assets/javascripts/active_admin.js):
//= require activeadmin/quill_editor/quill
//= require activeadmin/quill_editor_input

UPDATE FROM VERSION <= 2.0: please add to your app/assets/stylesheets/active_admin.scss the line @import 'activeadmin/quill_editor/quill.snow';

If you installed Active Admin with Webpacker support:

  • Execute in your project root:
yarn add blocknotes/activeadmin_quill_editor
  • Add to your app/javascript/packs/active_admin.js:
require('activeadmin_quill_editor')

Usage

In your Active Admin models, form configuration, set the text inputs with as: :quill_editor where needed.

data-options: permits to set quill editor options directly - see options list

If you are using Action Text (has_rich_text) on the same field of the Quill editor please take a look at this workaround to avoid issues.

Examples

Basic usage

# Active Admin article form conf:
  form do |f|
    f.inputs 'Article' do
      f.input :title
      f.input :description, as: :quill_editor
      f.input :published
    end
    f.actions
  end

Toolbar buttons configuration

f.input :description, as: :quill_editor, input_html: { data: { options: { modules: { toolbar: [['bold', 'italic', 'underline'], ['link']] }, placeholder: 'Type something...', theme: 'snow' } } }

ImageUploader plugin

This plugin allows to upload images to the server (instead of storing them in base64 by default), reference here.

# Upload method (to be included in the admin entity configuration)
member_action :upload, method: [:post] do
  result = { success: resource.images.attach(params[:file_upload]) }
  result[:url] = url_for(resource.images.last) if result[:success]
  render json: result
end
# Form field
unless object.new_record?
  plugin_opts = { image_uploader: { server_url: upload_admin_post_path(object.id), field_name: 'file_upload' } }
  f.input :description, as: :quill_editor, input_html: { data: { plugins: plugin_opts } }
end

For the relevant files of the upload example see here. Consider that this is just a basic example: images are uploaded as soon as they are attached to the editor (regardless of the form submit), it shows the editor only for an existing record (because of the upload_admin_post_path) and it doesn't provide a way to remove images (just deleting them from the editor will not destroy them, you'll need to implement a purge logic for that).

Changelog

The changelog is available here.

Do you like it? Star it!

If you use this component just star it. A developer is more motivated to improve a project when there is some interest. My other Active Admin components.

Or consider offering me a coffee, it's a small thing but it is greatly appreciated: about me.

Contributors

  • Mattia Roccoberton: author
  • The good guys that opened issues and pull requests from time to time

License

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