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.
-
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
-
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
-
Adding 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 new content
<%= 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 %>
-
To accept the rich text content, all you have to do is permit the referenced attribute: update the
class MessagesController < ApplicationController def create message = Message.create! params.require(:message).permit(:title, :content) redirect_to message end end
-
Start bloging
`http://localhost:3000/posts`
Where are the tests?