Action Text

In this chapter, you will learn how to handle rich text content in a Rails application with the help of Action Text component.

We will cover the following topics in this chapter:

• What Action Text is, and how to install and configure it.
• How to create, render, style, and customize rich text content.

What is Action Text?

Installing Action Text enables you to display the rich text content – text that can including formatting features such as bold, italics, colors, fonts, etc. Action Text stores the rich text content in a table, then attach it to any of our models.

Action Text component comes with a WYSIWYG editor called Trix. You can provide a user-friendly interface in your application (similar to what you see in the email composer in Gmail application).

For this chapter, we start by creating a new Rails application:

rails newBlogApp

Then, inside the application, let’s generate a scaffolded Post resource and run migrations.

rails generate scaffold Post title:string
rails db:migrate

Next, add a root route for our Post’s index view to the top of our routes.rb file.

Rails.application.routes.draw do
  root to:"posts#index"
  resources :postsend

Install Action Text

To add the rich text support, install Action Text component, followed by running migrations again.

rails action_text:install
rails db:migrate

This creates the files app/javascript/application.js and app/assets/stylesheets/actiontext.css. The second migration creates tables for Active Storage blobs and attachments (action_text_rich_texts, active_storage_blobs, active_storage_attachments, active_storage_variant_records)

The application.js file shows that trix and actiontext support has been added.

import "@hotwired/turbo-rails"
import "controllers"

import "trix"
import "@rails/actiontext"

You also need to import actiontext.css in the application’s main CSS file (application.css) −

@import"./actiontext.css";

The Action Text support hasn’t been activated yet. Start the Rails server and visit http://localhost:3000/posts/new page.

ActionText Setup

We need to add a content field in the Post model.

classPost<ApplicationRecord
  has_rich_text :contentend

Presently, the new Post form only has the text input field for title. Let us add rich_text_area input type (provided by ActionText) in the app/views/posts/_form.html.erb template (shown in bold)

<%= form_with(model: post) do |form| %>
  <% if post.errors.any? %>
&lt;div style="color: red"&gt;&lt;h2&gt;&lt;%= pluralize(post.errors.count, "error") %&gt; prohibited this post from being saved:&lt;/h2&gt;
  &lt;ul&gt;
    &lt;% post.errors.each do |error| %&gt;
      &lt;li&gt;&lt;%= error.full_message %&gt;&lt;/li&gt;&lt;%end%&gt;
  &lt;/ul&gt;&lt;/div&gt;&lt;%end%&gt;
  <div><%= form.label :title, style: "display: block" %>
&lt;%= form.text_field :title%&gt;
  </div><div class="field"><%= form.label :content %>
&lt;%= form.rich_text_area :content%&gt;
  </div><div><%= form.submit %>
  </div><%end%>

You also have to modify the show view app/views/posts/show.html.erb to be able to display the contents of new post.

<p style="color: green"><%= notice %></p>
<p>
  <strong>Title:</strong>
  <%[email protected] %>
</p><p><strong>Content:</strong><%= @post.content.to_s.html_safe %>
</p>

<div>
  <%= link_to "Edit this post", edit_post_path(@post)%> |
  <%= link_to "Back to posts", posts_path %><%= button_to "Destroy this post",@post, method::delete%>
</div>

Make sure the PostsController has its post_params method allows title and content fields −

defpost_params
   params.require(:post).permit(:title,:content)end

That’s it. Save all the changes and run the server. The /posts/new route provides a trix editor for the content field.

Click on the Create Post. The application displays the confirmation of the post creation with the help of show view.

Adding Embedded Images

In this chapter, you learned how to add rich text editor in your blogging app. You can add Embedded Images and Attachments support. For this, you will need to install the image_processing gem.

Add the following in the application’s Gemfile −

gem 'image_processing','~> 1.2'

And then run the following command −

bundle install

The image_processing gem is used by Active Storage to things such as resize, crop, and optimize images, generate thumbnails for embedded images and convert images to different formats (JPEG, PNG, WebP, etc.).