Rich text with Trix

This use case is a simple, yet powerful one.

Most applications nowadays require rich text using some sort of WYSIWYG editor like Trix, or Mardown.

But Markdown is not really practical if your users are not technical or trainable, that's why Trix—in combination with Action Text— is a great option for Rails applications.

Adding a Trix field is pretty straightforward with Avo. First, you have to add Action Text to your Rails app by running:

bin/rails action_text:install

This command will add a couple of things to your application like:

• The required Javascript for @rails/actiontext and trix in case you don't have it installed.
• The image_processing gem which is required to analyze and transform attached images. By default Trix uses Active Storage so don't forget to set that up, you can do it using our S3 Uploads with Active Storage tutorial.
• Migrations responsible for creating the tables that hold the rich texts and attachments.
• An actiontext.css file where the Trix styles are included, if you want to customize how Trix looks, this is where you would make the changes.
• Default _content.html and _blob.html partials where we can customize how our content is rendered.

Next, we need to install the recently added libraries and migrate our database:

bundle install
bin/rails db:migrate

After installing Trix, we just need to configure a field to use it in our Avo resource file:

def fields
  field :body, as: :trix
end

And, that's about it, now you have a rich text field in your application using Avo.

You can customize the field on your panel, check Avo's Trix documentation for further info about it.