Quick Look at Action Text for Rails 6.
0Arun Mathew KurianBlockedUnblockFollowFollowingJan 29Rails 6.
0 is almost here.
The stable version will be released on April 30.
The rails 6.
0 beta1 was released on January 15.
As always Rails 6.
0 is also action-packed.
There are two major frameworks newly introduced, Action Mailbox and Action Text.
In this post, let's take a quick look at Action Text by using it in a small app.
courtesy:wikipediaAction TextAction Text allows us to bring rich text content and editing to Rails.
This means we can perform operations like the formatting of text, embed images, format links, add lists and other editors like feature to a text field.
This done by including Trix editor into the framework.
The RichText content generated by the Trix editor is saved in its own RichText model that’s associated with any existing Active Record model in the application.
All embedded images or other attachments are automatically stored using Active Storage.
Let us start building our Rails app which will be a blogger app.
The app is created in Rails 6.
0 so the ruby version must be >2.
5.
In the terminal typerails new blog — edgeThe — edge flag fetches the latest rails version or edge version of the rails.
Action Text expects web packer and ActiveStorage installed.
The active storage is already present in the rails app.
So we needgem “image_processing”, “~> 1.
2” #uncomment from Gemfilegem ‘webpacker’in the gem file.
Now runbundle install.
Next, we need to create a config/webpacker.
ymlbundle exec rails webpacker:installNow let us start our Rails Server.
Great lets quickly build our app.
The app will have only one model Article.
Let us create a controller for articlesrails g controller Articles index new create show edit update destroy — no-helper — no-test-frameworksLet us configure our routesRails.
application.
routes.
draw do resources :articlesendNow we need to create our model.
Our Articles model will have two fields they are title and text.
text must be the field that accepts Rich Text Format.
So in the migration, we need to add only the title field.
The text field will be handled by ActionText.
Let’s generate the modelrails g model Articles title:string — no-test-frameworkRun the migrationsrails db:migrateNow let us add ActionText part.
For that first runrails action_text:installThis will add all the dependencies required by Action Text.
Most notably this will add a new file javascript/packs/application.
js and two action-storage migrations.
Run the migrations again usingrails db:migrateNow we can add the text part of our model.
Go to app/models/article.
rb and add the following linehas_rich_text :texttext is the field name we are providing it can be anything like body or content etc.
Now our model becomesclass Article < ApplicationRecord has_rich_text :textendBefore we build our form lets create our controller logic for the creation of articles.
class ArticlesController < ApplicationController def create @article = Article.
new(article_params) @article.
save redirect_to @article end private def article_params params.
require(:article).
permit(:title, :text) endendWe can now create the form for the blog.
In app/views/articles/new.
rb add the following form code.
<%= form_with scope: :article, url: articles_path, local: true do |form| %><p> <%= form.
label :title %><br> <%= form.
text_field :title %> </p> <p> <%= form.
label :text %><br> <%= form.
rich_text_area :text %> </p> <p> <%= form.
submit %> </p><% end %>Notice that for text field we are using which form.
rich_text_area is provided by Action Text.
Let us render our pageAwesome!!We now have an awesome text editor for creating our article.
Before we start playing with the editor, let us quickly implement the show functionality of the blog, so that we can see the articles we have created.
In app/controllers/articles_controller.
rb add the following function def show @article = Article.
find(params[:id]) endAlso, we need to create a view for thisCreate the file app/views/articles/show.
html.
erb and add the following code<p>Article Title:<strong><%= @article.
title %></strong></p><p>Article Text:<strong><%= @article.
text %></strong></p><%= link_to ‘Create new’,new_article_path %>That's it.
Our app is done.
Now let's check the various features available in the text editor provided by ActionText.
We can see that ActionText provide almost all the functionalities of a normal rich text-editor like formatting the text as bold, italic, add strike-throughs, quotes, links, drag and drop images, etc.
After saving this we can see the saved post from the show page.
Great!This is a very small example that displays the potential of ActionText.
Hope it was helpful.
Do give it a try.
A vast majority of web apps deal with rich content in some way.
So I believe this new feature of rails can make the life of many developers easy.
Kudos to DHH and all the awesome people behind this.
Some Useful LinksAction Text Overview – Ruby on Rails GuidesAction Text OverviewThis guide provides you with all you need to get started in handling rich text content.
After…edgeguides.
rubyonrails.
org.. More details