---

Definition

Action Text is a feature introduced in Ruby on Rails version 6.0 and later that makes it easy to handle rich text content in web applications.

It provides a framework for integrating a WYSIWYG (What You See Is What You Get) editor into your Rails applications for creating and editing rich text content, such as formatted text, images, and embedded multimedia.

---

Context

---

Install active_storage

rails active_storage:install
rails db:migrate

---

Check installation

gem list | grep activestorage

---

Install action_text

Command

rails action_text:install

Output

Explanation

The rails action_text:install command:

1. Generates Migration Files: The rails action_text:install command generates a migration file for creating the necessary database tables to store rich text content and its associated records. Specifically, it creates migration files for the ActionText::RichText and ActiveStorage::Attachment models.

2. Modifies JavaScript and CSS Files: It adds JavaScript and CSS imports to your application's JavaScript and CSS packs to include the required assets for Action Text. Specifically, it includes Trix, a rich text editor, and the Action Text stylesheets.

3. Creates an Action Text Config File: It generates an action_text.rb configuration file in the config/initializers directory. This file allows you to configure various aspects of Action Text, such as the rich text editor's toolbar buttons and allowed HTML elements.

4. Sets Up Active Storage: If you haven't already installed Active Storage in your application, the command will prompt you to run rails active_storage:install. Active Storage is used to manage file attachments in Action Text.

---

Configure field

Initial code

#  app/models/course.rb
has_rich_text :description

Complete code

#  app/models/course.rb
class Course < ApplicationRecord
  validates :title, presence: true
  validates :description, presence: true, length: { :minimum => 5 }

  belongs_to :user
  has_rich_text :description
end

Explanation

The has_rich_text :description specifies that the Course model has a rich text attribute called description. This means that you can use Action Text to create and edit rich text content for the description attribute, allowing you to format text, add images, and perform other rich text editing operations.

---

Create stylesheets folder

Command

mkdir app/javascript/stylesheets

Check creation

ls app/javascript/

Output

---

Create action_text stylesheets file

Command

touch app/javascript/stylesheets/actiontext.scss

Check creation

---

Configure application.js

Code

# app/javascript/packs/application.js
require('stylesheets/application.scss')

Complete code

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"

import 'bootstrap/dist/js/bootstrap'
import 'bootstrap/dist/css/bootstrap'
import "bootstrap"
import 'stylesheets/index.scss';

import "channels"
import "@fortawesome/fontawesome-free/css/all"

Rails.start()
Turbolinks.start()
ActiveStorage.start()

require('stylesheets/application.scss')
require("trix")
require("@rails/actiontext")

---

Configure application.scss

Initial code

# app/javascript/stylesheets/application.scss
@import 'trix/dist/trix';
@import './actiontext.scss';

Complete code

# app/javascript/stylesheets/application.scss
@import 'trix/dist/trix';
@import './actiontext.scss';

---

Configure form

Initial code

# app/views/courses/_form.html.erb
  <%= f.label :description %>
  <%= f.rich_text_area :description %>

Complete code

# app/views/courses/_form.html.erb
<%= simple_form_for(@course) do |f| %>
  <%= f.error_notification %>
  <%= f.error_notification message: f.object.errors[:base].to_sentence if f.object.errors[:base].present? %>

  <div class="form-inputs">
    <%= f.input :title %>    
    <%= f.label :description %>
    <%= f.rich_text_area :description %>
    <%= f.hidden_field :user_id, value: current_user.id %>    
  </div>

  <div class="form-actions">
    <%= f.button :submit %>
  </div>
<% end %>

Check form

---

Test it

Initial

Result

---

Celebrate

You've made it!

---

Let's become friends

• Github

• LinkedIn

• Hashnode

• Youtube

---

Final thoughts

I hope this article has been helpful to you. Please feel free to reach out if you have any questions. Your thoughts, suggestions, and corrections are more than welcome.

By the way, don't hesitate to drop your suggestions for new blog articles.

I look forward to seeing you next time.

---