Step by Step guide to test Rails ActiveText

adrienpoly

Adrien Poly

Posted on October 4, 2018

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.
๐Ÿ’– ๐Ÿ’ช ๐Ÿ™… ๐Ÿšฉ
adrienpoly
Adrien Poly

Posted on October 4, 2018

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

ยฉ TheLazy.dev

About