ActiveAdmin Trix editor setup (tested with Rails 6.0.3.3)

setup.md

• Setup the Rails project with ActiveAdmin using Webpacker: rails g active_admin:install --use_webpacker
• Setup Trix editor for ActiveAdmin:
  • Execute: bin/rails action_text:install
  • Add Javascript library to app/javascript/packs/active_admin.js:

require("trix")
require("@rails/actiontext")

• Add style library to app/javascript/stylesheets/active_admin.scss:

@import "trix/dist/trix";

• Add the rich field to the model (ex. Post): has_rich_text :content
• Add the editor to the admin form:

  form do |f|
    f.inputs 'Post' do
      f.input :title
      li do
        label :content, class: 'trix-editor-label'
        f.rich_text_area :content
      end
    end
    # ...
  end

• To output the content in the show, add to the admin show block:

  show do
    attributes_table do
      row :title
      row :content do
        div resource.content
      end
    end
  end

• Minor optional style improvements to app/javascript/stylesheets/active_admin.scss:

body.active_admin {
  trix-editor {
    background: #fff;
    max-height: 300px;
    overflow-y: scroll;
  }

  .trix-editor-label {
    float: none;
    margin-bottom: 10px;
  }
}

Thank you so much.

perfect

still mine not working..help me with this i'm not able to call scss and js for trix....bold function is not working.

Using Rails 7

go to active_admin.rb in intializer.then add

  config.register_stylesheet 'https://unpkg.com/trix@2.0.8/dist/trix.css'


 config.register_javascript "https://unpkg.com/trix@2.0.8/dist/trix.umd.min.js"

then in any active admin resource

 form do |f|
    f.inputs 'Post' do
    f.input :title
    li do
       label :content, class: 'trix-editor-label'
       f.rich_text_area :content
    end
   end
# ...
  end