DEV Community

Adrien Poly
Adrien Poly

Posted on • Edited on

Step by Step guide to test Rails ActiveText

🚧❌ EDITED ActionText is now fully released in Rails 6 don't follow this guide that was written for the preview version

You might have seen the video of DHH about ActionText upcoming feature in Rails 6. This is a step by step guide for creating the exact same example as in the video.

⚠️ If like me you never ran an edge version of Rails before and wonder how to do it then this is for you

Create a new app from the Edge version of Rails

Clone the Rails repo

git clone https://github.com/rails/rails.git
cd rails
bundle install
Enter fullscreen mode Exit fullscreen mode

Create a new app with Rails Edge, YABE (YABE: Yet Another Blog Example)

We will want to create a new app within the same directory and using the locally installed Rails generator

#move out of rails folder first
cd ..

#create the app with the local rails generator and the edge flag to use GH master branch
rails/railties/exe/rails new yabe --edge

cd yabe
Enter fullscreen mode Exit fullscreen mode

Start the app

⚠️ remember to always use the local rails command: bin/rails

bin/rails s
Enter fullscreen mode Exit fullscreen mode

Visit http://localhost:3000

You should now have the rails startup screen showing

Rails version: 6.0.0.alpha πŸŽ‰πŸŽ‰

Installing ActionText

Add the ActionText gem (and image variants for active Storage):

# Gemfile
gem "actiontext", github: "rails/actiontext", require: "action_text"
gem "image_processing", "~> 1.2" # for Active Storage variants
Enter fullscreen mode Exit fullscreen mode

Install gem, assets, npm dependency, and migrations

bundle install
bin/rails action_text:install
bin/rails db:migrate
Enter fullscreen mode Exit fullscreen mode

Scaffold Post

bin/rails g scaffold post title:string
bin/rails db:migrate
Enter fullscreen mode Exit fullscreen mode

Add a rich text field to Post

# app/models/post.rb
class Post < ApplicationRecord
  has_rich_text :content
end
Enter fullscreen mode Exit fullscreen mode

Active Text brings a polymorphic model under the hood for managing RichText

Add a field to your form

<%= form.rich_text_area :content %> : rich_text_area is the new content type to display Trix

<%#app/views/posts/_form.html.erb %>
<%= form_with(model: post) do |form| %>
  …
  <div class="field">
    <%= form.label :content %>
    <%= form.rich_text_area :content %>
  </div>
  …
<% end %>
Enter fullscreen mode Exit fullscreen mode

finally, display the rich text on a page:

<%= @post.content %>
Enter fullscreen mode Exit fullscreen mode

Update the strong params in PostsController

def post_params
  params.require(:post).permit(:title, :content)
end
Enter fullscreen mode Exit fullscreen mode

Start blogging

http://localhost:3000/posts
Enter fullscreen mode Exit fullscreen mode

My 2 cents

  • My first take out was to use an edge version of Rails.
  • With regards to ActiveText I am impressed with how simple it is to now add rich text editing in a Rails app.
  • I love Trix don't get me wrong but I would like to have a layer of abstraction to potentially have other front-end solution for the Editor.

Top comments (4)

Collapse
 
colinrubbert profile image
Colin Rubbert

With regards to adding action_text to an existing app, for instance if you already had:

post.rb
:title,   t.string
:content, t.text

Would you have to run a migration to remove post :content and then implement has_rich_text :content to the model?

If you just add the has_rich_text field does it just update those paths, ignore the previous model schema, or something else?

Collapse
 
adrienpoly profile image
Adrien Poly

has_rich_text adds a polymorphic link to your table. This means that the rich text content is not stored in the posts table but in a dedicated polymorphic table for rich content.

Therefore in your case, you would need to migrate your content to this new table.

Collapse
 
philnash profile image
Phil Nash

This is a great guide, thanks for putting it together. I've never worked with absolute bleeding edge Rails like this before, so this is really useful.

Collapse
 
adrienpoly profile image
Adrien Poly

Thanks it was a BIG discovery for me too πŸ˜€