Add Rich Text in Rails using Action Text and Trix

Build a blog, a note-taking app, or a community forum; any app that lets users share content needs rich text.

What can I build with Rails Action Text?

The Action Text Building Block lets users add, edit, and view Rich Text. You’ll be able to build awesome products like:

  1. A blog application with a fully functional text editor.
  2. A note taking app where users can add lists and images.
  3. A forum for a community where members add, edit, and vote on posts.

Some background on your tools

Action Text

Action Text is a new feature in Rails 6 that makes it easy to add rich text content to your applications. Utilizing Active Storage, it takes care of all the tricky parts in the background relating to formatting text and storing attachments.

Trix Text Editor

Trix is the open-source rich text editor officially supported by Rails 6. Within the editor, users can format text, add bulleted lists, and attach files.

And it’s super easy to install and add some light customizations. So let’s get to it!

Step-by-step Tutorial

We’ll be adding a rich text field to a basic blogging app built on Rails version 6.0.3.4. All I’ve done so far is generate a scaffold for a Post resource.

Our starting point

All code for this Building Block can be found in the rich text branch of the Building Blocks repo.


Step 1 - Install Active Storage and Action Text

Run the following commands:

Copy to clipboard

-- CODE language-sh --rails active_storage:install rails action_text:install rails db:migrate

These commands do three main things:

  1. Generate the necessary tables for Active Storage and Action Text.
  2. require some javascript for Trix and Action Text in the application manifest.
  3. Generate a stylesheet for the Trix editor called actiontext.scss.

Step 2 - Add rich text field to Post model

Add this to the Post model:

Copy to clipboard

-- CODE language-rb --has_rich_text :body

Note that we’re not actually adding a column to Post called body. The rich text gets stored automatically in the internal table generated in step 1 called action_text_rich_texts.


Step 3 - Permit body param in PostsController

Append body to permit in the post_params method:

Copy to clipboard

-- CODE language-rb --params.require(:post).permit(:title, :author, :body)


Step 4 - Add rich_text_area to Post form

Paste this code into the posts/_form.html.erb partial after the author field:

Copy to clipboard

<div class="field">
	<%= form.label :body %>
	<%= form.rich_text_area :body %>
</div>

And with that one magic line of code, we have a beautiful rich text editor:

Editing Post.body with our new Rich Text input

Step 5 - Render rich text in show

We can now add and edit the post.body rich text field, but it’s not yet being rendered in the show action.

We’ll fix this by adding the following to show.html.erb:

Copy to clipboard

<p>
  <strong>Body:</strong>
  <%= @post.body %>
</p>
  

Just one line renders our beautiful post:

Rendering Post.body

Step 6 - Attaching Images

Rails needs the image_processing gem to render attached images. Uncomment this line from your Gemfile (or add it if it’s not there):

Copy to clipboard

-- CODE language-rb --gem 'image_processing', '~> 1.2'

Then run bundle install:

Copy to clipboard

-- CODE language-sh --bundle install

And restart your server:

Copy to clipboard

-- CODE language-sh --rails server

And there you have it - now we can attach adorable kitten photos to our posts!


posts/:id/show with an attached image

See it live

See the Rich Text building block live in BugTracker. BugTracker is the first DinoSaaS MVP - a fully-functional open-source SaaS app.

Check out the step-by-step tutorial to see how it's made.

Build beautiful products, faster than ever

Be the first to know when we release new App Templates, Building Blocks, and MVPs.

Thank you! Click the link in your inbox to confirm your subscription.
Oops! Something went wrong. Email us at hey@dinosaas.com if this keeps happening.