Using Action Text in Rails 6

How to use Action Text to build a rich text editor in Rails 6
Luan Nguyen
Apr 13, 2020 · 3 min read

Trix editor: https://trix-editor.org


In this article, I'm going to share with you a cool feature in Rails 6 is Action Text. It helps us easy to build a rich-text-editor in Rails application.

What'll we do:

  • What is Action Text?
  • What is Trix Editor?
  • Using Action Text through example:
    • Create a new Rails 6 application
    • Create a Post model with 2 columns are title and content
    • Install Action Text
    • Using Action Text to edit the content of Post
  • Conclusion

What is Action Text?

  • Action Text is a new cool feature in Rails 6.0, which helps to build a rich text editor (WYSIWYG editor) easily in Rails application.
  • It includes the Trix editor that handles everything from formatted text to links or embedded images.
  • Attachments as images are automatically stored using Active Storage and associated with the included RichText model.

What is Trix Editor?

Trix is a rich text editor for everyday writing. Compose beautifully formatted text in your web application. 
Trix is an editor for writing messages, comments, articles, and lists—the simple documents most web apps are made of. It features a sophisticated document model, support for embedded attachments, and outputs terse and consistent HTML.

Using Action Text through Example:

  • Create a new Rails 6 application
  • Create a Post model with 2 columns are: title and content
  • Install Action Text
  • Using Action Text to edit the content of Post
Create a new Rails 6 application
rails new action-text-in-rails6

After creating the Rails application, switch to its folder
cd action-text-in-rails6

Install Gems for our application:
bundle install

Starting up the Web Server:
rails server

CRUD Post by scaffold 
A scaffold in Rails is a full set of model, database migration for that model, controller to manipulate it, views to view and manipulate the data, and a test suite for each of the above.
rails generate scaffold Post title:string content:text

and do not forget running migration to create the Post table:
rails db:migrate

Install Action Text 
Run:
rails action_text:install

The command will add the Yarn package and add necessary files as:
  - Yarn package: Add packages for actiontext and trix to package.json
  - CSS Add actiontext.scss to app/assets/stylesheets: CSS for text editor
  - JS :
  • Adding trix to app/javascript/packs/application.js
  • Adding @rails/actiontext to app/javascript/packs/application.js
# app/javascript/packs/application.js
[...]
require("trix")
require("@rails/actiontext")

  - Migration : Create 2 migration
  • 123XYZ_create_active_storage_tables.active_storage.rb => Store attachments
  • 456XYZ_create_action_text_tables.action_text.rb   => Store editing content
  - View : Create a app/views/active_storage/blobs/_blob.html.erb => Show attachements

Run migration to create active_storage_tables and action_text_tables
rails db:migrate

Using Action Text to edit the content of Post:
In the Post model, add has_rich_text  for content field which we want to edit:
class Post < ApplicationRecord
  has_rich_text :content
end

In Form, using rich_text_area helper to edit content
<div class="field">
  <%= form.label :content %>
  <%= form.rich_text_area :content %>
</div>

Reload edit Post page and see the editor like that:
Editor


Try to edit some text, and see how it work!

Attachments:
When you upload an image or file in the editor, it's automatically stored using Active Storage.
The partial: app/views/active_storage/blobs/_blob.html.erb will represent uploaded files.

And do not forget to add the image_processing gem to your Gemfile, to generate an image representation:
gem 'image_processing', '~> 1.2'

Install Gem for our application:
bundle install

How to use Active Storage to Upload Files on Rails application
https://luanotes.com/blogs/how-to-use-active-storage-to-upload-files-to-s3-on-rails

Conclusion

In this article, I guide you on how to use Action Text to add rich text editor in Rails application.

Full example code on Github:
https://github.com/thanhluanuit/action-text-in-rails6
References: