Action Text - What is it?
Action text is, well, it’s basically the Trix editor ported into Ruby on Rails. This is covered fairly well in the edge guide, which I would suggest checking out as they’re probably far better at writing than I am. As far as I understand it, Trix originated from Basecamp, which was created in part by DHH, the father of Ruby on Rails, as well as Hey.
I recently created a video on how to Add Action Text to your Ruby on Rails app. Part of my video covered how to add Action Text from the perspective of a complete beginner. While covering this, however, I realized that there were some things I forgot. Thankfully, because I was running on a new computer I recently built, I ran into these issues. This meant that both my video tutorial, as well as this text tutorial, will cover these issues. By the time you’re done reading this article, you’ll be up and running, or your money back. Please tell me you didn’t pay money for this content.
Video Version of Tutorial
Timestamps included for your convenience:
0:00 Video Summary & Overview
1:28 Code Begins With Adding Action Text
4:15 The Backend Setup (The Model)
4:35 The Middleware Setup (The Controller)
4:50 The Frontend Setup (The Views)
6:15 The WYSIWYG Demo With Images
7:42 Image Bug And How To Fix It With Image Magick!
9:45 How To Style Action Text Images
12:29 Video Recap & Outro
Part 1 - Adding Action Text
We’re going to begin adding action text by first creating a scaffold to add it to. This assumes you’re in a brand new Ruby on Rails 6 application. Inside your terminal, run the following commands. These commands will create your post scaffold and migrate your database. That’s a fancy way of saying it’ll add the required tables to your database. After you set the root of your application, delete your scaffolds stylesheet file. This file is located at app/assets/stylesheets/scaffolds.scss. This file makes all your links have an ugly black on hover effect.
# Just a note, title is of type string by default
rails g scaffold post title
# Next, let's migrate the database
rails db:migrate
# Next, inside of your config/routes.rb file add the following to set the root of your application
root "posts#index"
Next comes the part where we actually add Action Text. This will allow you to create rich text areas and CMS applications similar to what you see here on Deanin.com. Start by running the rails action_text:install command. Afterwards, you’ll want to set up your model-view-controller components to understand that you want to use Action Text.
# Once again inside your terminal, run the following commands
rails action_text:install
rails db:migrate
Part 2 - Setting Up The Backend (The Model)
The model is relatively easy here. All we need to do is set tell it that we it will has_rich_text attached to it, and that it’s called :body.
# Inside app/models/post.rb
class Post < ApplicationRecord
# This is the line you'll need to add.
has_rich_text :body
end
Part 3 - Setting Up The Middleware (The Controller)
The controller is also very easy to set up for Action Text. Inside of app/controllers/posts_controller.rb, you’ll want to scroll all the way to the bottom. At the bottom of generated Rails controllers, you’ll usually find where we permit parameters. Inside of this private post_params method is where we need to make our change. After title inside permit(:title), add a comma and :body.
# Previous controller code omitted for readability
# ...
private
# Use callbacks to share common setup or constraints between actions.
def set_post
@post = Post.find(params[:id])
end
# Only allow a list of trusted parameters through.
def post_params
# The line where you need to add :body is this one.
params.require(:post).permit(:title, :body)
end
end
Part 4 - Setting Up The Front End (The Views)
Setting up the front end for Action Text requires two parts. The first is to change the form to have the WYSIWYG text area. And then the second is to change the show page to actually display this rich text! Inside your app/views/_form.html.erb partial, add the following code.
# Previous code omitted for readability
# ...
<div class="field">
<%= form.label :title %>
<%= form.text_field :title %>
</div>
# You'll need to add the stuff inside this div
<div class="field">
<%= form.label :body %>
<%= form.rich_text_area :body %>
</div>
<div class="actions">
<%= form.actions %>
</div>
<% end %>
Next we’ll need to make a quick change to the show page. It’s basically the same thing as the form, we just need to tell it to render the @post.body contents.
<p id="notice"><%= notice %></p>
<p>
<strong>Title:</strong>
<%= @post.title %>
</p>
<div class="container">
<%= @post.body %>
</div>
<%= link_to 'Edit', edit_post_path(@post) %> |
<%= link_to 'Back', posts_path %>
Part 5 - Fixing Image Uploads
Fixing image uploads isn’t too bad either. You’ll want to head into your gemfile and uncomment the image_processing gem. This fixes the mini_magick issues, at least partially. Next you’ll want to head to your terminal and run bundle install. Afterwards, run an apt-get to install imagemagick, or download it from https://imagemagick.org if you’re not on Ubuntu.
# Inside your Gemfile, add the following
# Use Active Storage variant
gem 'image_processing'
# In your terminal, run the following
bundle install
sudo apt-get install imagemagick
# Then press y and hit enter to accept the install
y
Conclusion - How Can I Upload Videos?
And there you go, that’s how to set up Action Text and upload images with it! If you’re curious about how to also upload videos, I’ll be covering that next. You should see a new video and blog post covering it in the next few days. Unfortunately video uploads are a lot more involved than images are.
I do hope this helped though. I know this blog is still in the early stages, but I hope that you’re getting some value out of it. If you are, please let me know in the comments down below. Every comment I get on this blog always makes my day. I really do appreciate the support the community has given me over the years. See you in the next tutorial!
Related Posts
One reply on “Add Action Text To Ruby On Rails 6 For A Fast WYSIWYG Editor”
[…] need to add Action Text to the application. I’ve covered that previously on this blog over on this page. Basically we need to run a generator and set up our MVC appropriately. Code is included […]