Action Text is RICH!

Today I am exploring how to incorporate Action Text into my Rails application. It’s a great addition when you want the user to be able to add rich text with images, font styles, etc. I’ve seen it in other apps, but never implemented it myself, until today!

The first step once I’ve started my new rails app is to install both Action Text and Action Storage by running the following lines in your console. Then run `rails db:migrate` which will create tables for both of these.

rails action_storage:install
rails action_text:install
rails webpacker:install

For this application I am creating Posts that have both a title and a body. When creating the post model, I don’t need to include the body since that will be handled by Action Text. So I can run rails g scaffold Post title and run the migration again. Next, in the post model, we add has_rich_text :body to the model so it assigns rich text to the body attribute. I also need to permit :body in our params in the controller for this to be accepted.

<div class=”field”>
  <%= form.label :body %>
  <%= form.rich_text_area :body, class:’form-control’%>
</div>

Since I used scaffold, I can go to the views for Post and update the form to include body by adding the above code. This results in our Action Text form.

I can now open the rails app in my browser, go to `/posts/new` and see the Action Text setup for creating a post. I can create a post that has any of the formatting or files I want to upload. Once I have created it, I still need to set up how to show it on the post show page. The first thing I will need is to add the gem ‘image-processing’ to allow the app to process any images that were saved. With this gem added I can add the post’s body to the show page by writing the code below.

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

Clicking edit will re-render your post with the formatting assigned automatically. This is such a simple process, but a great way to give users even more creativity when using your application and giving you the ability to save all of the rich text! If only I had known about this for my projects! :)