0

Not seeing Quill editor in active admin form.

followed all instructions from here and the whole description box doesn't diplay. same happened to other editors i tried.

form title: "Drinks" do |f|
  f.inputs "Drinks" do
    f.input :title
    f.input :description, as: :quill_editor
    f.input :steps
    f.input :source
  end
  f.actions
end

enter image description here

3 Answers 3

0

Please ensure you have included active_admin/base to your app/assets/javascripts/active_admin.js file:

//= require active_admin/base
//= require activeadmin/quill_editor/quill
//= require activeadmin/quill_editor_input

This is what was causing the issue for me.

0

I have implemented Quill Rich Text Editor in Active Admin by following the below steps in Rails 6 application:

Add the gems:

gem 'activeadmin_quill_editor'
gem 'sassc'

Add below js code in app/assets/javascripts/active_admin.js:

//= require activeadmin/quill_editor/quill
//= require activeadmin/quill_editor_input

Add below css code in app/assets/stylesheets/active_admin.scss

@import 'activeadmin/quill_editor/quill.snow';
@import 'activeadmin/quill_editor_input';

For defualt toolbar options use the below syntax:

form do |f|
  f.inputs 'Notices' do
    f.input :description, as: :quill_editor
  end
  f.actions
end

For customized toolbar options the use below syntax:

form do |f|
  f.inputs 'Notices' do
    f.input :description, as: :quill_editor, input_html: { data: { options: { modules: { toolbar: [ ['bold', 'italic', 'underline', 'strike'],['blockquote', 'code-block'],  [{ 'header': 1 }, { 'header': 2 }], [{ 'list': 'ordered'}, { 'list': 'bullet' }], [{ 'script': 'sub'}, { 'script': 'super' }], [{ 'indent': '-1'}, { 'indent': '+1' }], [{ 'direction': 'rtl' }], [{ 'size': ['small', false, 'large', 'huge'] }], [{ 'header': [1, 2, 3, 4, 5, 6, false] }], [{ 'color': [] }, { 'background': [] }], [{ 'font': [] }], [{ 'align': [] }], ['clean'] ] }, theme: 'snow' } } }
  end
  f.actions
end

For more information visit:

0
// To view the variables that Active Admin provides, take a look at
// `app/assets/stylesheets/active_admin/mixins/_variables.scss` in the
// Active Admin source
// For example, to change the sidebar width:
// Needs to be done when default CSS was overriden 
// use this in SCSS file  
    @import "active_admin/mixins";
    @import "active_admin/base";
    @import 'activeadmin/quill_editor/quill.snow';
    @import 'activeadmin/quill_editor_input';
1
  • thanks for the code snippet. but can you explain what someone should do with this?
    – Mathieu J.
    Nov 1, 2023 at 0:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.