https://github.com/blocknotes/activeadmin_quill_editor
Quill Rich Text Editor for ActiveAdmin
https://github.com/blocknotes/activeadmin_quill_editor
activeadmin activeadmin-plugin rails rails5 ruby
Last synced: 2 months ago
JSON representation
Quill Rich Text Editor for ActiveAdmin
- Host: GitHub
- URL: https://github.com/blocknotes/activeadmin_quill_editor
- Owner: blocknotes
- License: mit
- Created: 2017-10-15T20:55:31.000Z (about 8 years ago)
- Default Branch: main
- Last Pushed: 2025-03-22T08:14:36.000Z (9 months ago)
- Last Synced: 2025-04-04T02:19:22.618Z (9 months ago)
- Topics: activeadmin, activeadmin-plugin, rails, rails5, ruby
- Language: JavaScript
- Homepage:
- Size: 416 KB
- Stars: 155
- Watchers: 3
- Forks: 31
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE.txt
Awesome Lists containing this project
README
# ActiveAdmin Quill Editor
[](https://badge.fury.io/rb/activeadmin_quill_editor)
[](https://rubygems.org/gems/activeadmin_quill_editor)
[](https://github.com/blocknotes/activeadmin_quill_editor/actions/workflows/linters.yml)
[](https://github.com/blocknotes/activeadmin_quill_editor/actions/workflows/specs_rails61.yml)
[](https://github.com/blocknotes/activeadmin_quill_editor/actions/workflows/specs_rails70.yml)
[](https://github.com/blocknotes/activeadmin_quill_editor/actions/workflows/specs_rails71.yml)
[](https://github.com/blocknotes/activeadmin_quill_editor/actions/workflows/specs_rails72.yml)
[](https://github.com/blocknotes/activeadmin_quill_editor/actions/workflows/specs_rails80.yml)
An Active Admin plugin to use [Quill Rich Text Editor](https://github.com/quilljs/quill) in form fields.
Please :star: if you like it.
## Install
_NOTE_: the gem 2.x provide Quill 2.x, while Quill 1.x is provided with the gem version 1.x
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_):
```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_):
```js
//= require activeadmin/quill_editor/quill
//= require activeadmin/quill_editor_input
```
If you installed Active Admin with Webpacker support:
- Execute in your project root:
```sh
yarn add blocknotes/activeadmin_quill_editor
```
- Add to your *app/javascript/packs/active_admin.js*:
```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](https://quilljs.com/docs/configuration/)
If you are using Action Text (`has_rich_text`) on the same field of the Quill editor please take a look at [this workaround](https://github.com/blocknotes/activeadmin_quill_editor/issues/33#issuecomment-1965996947) to avoid issues.
## Examples
### Basic usage
```ruby
# 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
```ruby
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](https://github.com/NoelOConnell/quill-image-uploader).
```ruby
# 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
```
```ruby
# 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](examples/upload_plugin_using_activestorage/).
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).
## Javascript API
Some methods are provided for advanced use cases:
- `window.getQuillEditors()`: returns all the available Quill editors instances;
- `window.getQuillEditorByIndex(n)`: returns the N-th Quill editor instance;
- `window.getQuillEditorByElementId(id)`: returns the Quill editor instance related to the specified element id (e.g. _article_description_).
## Development
Project created by [Mattia Roccoberton](http://blocknot.es), thanks also to the good guys that opened issues and pull requests from time to time.
For development information please check [this document](extra/development.md).
## 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](https://github.com/blocknotes?utf8=✓&tab=repositories&q=activeadmin&type=source).
Or consider offering me a coffee, it's a small thing but it is greatly appreciated: [about me](https://www.blocknot.es/about-me).
## License
The gem is available as open-source under the terms of the [MIT](LICENSE.txt).