loading...

Step by Step guide to test Rails ActiveText

adrienpoly profile image Adrien Poly Updated on ใƒป2 min read

๐ŸšงโŒ 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

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

Start the app

โš ๏ธ remember to always use the local rails command: bin/rails

bin/rails s

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

Install gem, assets, npm dependency, and migrations

bundle install
bin/rails action_text:install
bin/rails db:migrate

Scaffold Post

bin/rails g scaffold post title:string
bin/rails db:migrate

Add a rich text field to Post

# app/models/post.rb
class Post < ApplicationRecord
  has_rich_text :content
end

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 %>

finally, display the rich text on a page:

<%= @post.content %>

Update the strong params in PostsController

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

Start blogging

http://localhost:3000/posts

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.

Posted on by:

adrienpoly profile

Adrien Poly

@adrienpoly

Freelance Fullstack developer Rails React Javascript

Discussion

markdown guide
 

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?

 

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.

 

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.

 

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