rails .try_快速浏览Rails 6.0的操作文本

rails .try

by Arun Mathew Kurian

通过阿伦·马修·库里安(Arun Mathew Kurian)

快速浏览Rails 6.0的操作文本 (A Quick Look at Action Text for Rails 6.0)

Rails 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 Rails releases always are, 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.

Rails 6.0即将发布。 稳定版将于4月30日发布。Rails6.0 beta1已于1月15日发布。与以往的Rails版本一样，Rails 6.0也充满了动感。 新引入了两个主要框架，即Action Mailbox和Action Text 。 在这篇文章中，让我们在一个小型应用程序中使用它来快速看一下Action Text。

动作文字 (Action Text)

Action Text allows us to bring rich text content and editing to Rails. This means we can perform operations like formatting text, embedding images, formatting links, adding lists and other editor-like feature to a text field.

动作文本使我们能够将丰富的文本内容和编辑带入Rails。 这意味着我们可以执行诸如格式化文本，嵌入图像，格式化链接，向文本字段添加列表和其他类似编辑器的功能之类的操作。

This is done by including the 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.

这是通过将Trix编辑器包含在框架中来完成的。 Trix编辑器生成的RichText内容保存在其自己的RichText模型中，该模型与应用程序中任何现有的Active Record模型相关联。 所有嵌入的图像或其他附件都将使用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.

让我们开始构建我们的Rails应用，它将成为一个博客应用。 该应用程序是在Rails 6.0中创建的，因此Ruby版本必须> 2.5。

In the terminal type

在终端类型

rails new blog --edge

The -- edge flag fetches the latest rails version or edge version of the rails.

-edge标志获取最新的rails版本或rails的edge版本。

Action Text expects web packer and ActiveStorage to be installed. The active storage is already present in the Rails app. So we need

Action Text希望安装Web Packer和ActiveStorage。 活动存储已经存在于Rails应用程序中。 所以我们需要

gem “image_processing”, “~> 1.2” #uncomment from Gemfilegem ‘webpacker’

in the gem file.

在gem文件中。

Now run

现在运行

bundle install.

Next, we need to create a config/webpacker.yml:

接下来，我们需要创建一个config / webpacker.yml：

bundle exec rails webpacker:install

Now let us start our Rails Server.

现在让我们启动Rails Server。

Great, let’s quickly build our app. The app will have only one model Article.

太好了，让我们快速构建我们的应用程序。 该应用程序将只有一篇模型文章。

Let us create a controller for articles:

让我们为文章创建一个控制器：

rails g controller Articles index new create show edit update destroy — no-helper — no-test-frameworks

And then configure our routes:

然后配置我们的路线：

Rails.application.routes.draw do resources :articlesend

Next, 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.

接下来，我们需要创建模型。 我们的Articles模型将具有两个字段： title和text 。 text必须是接受RTF格式的字段。 因此，在迁移中，我们只需要添加标题字段。 文本字段将由ActionText处理。

Let’s generate the model

让我们生成模型

rails g model Articles title:string — no-test-framework

and run the migrations:

并运行迁移：

rails db:migrate

Now let us add ActionText part. For that first run

现在让我们添加ActionText部分。 对于第一次运行

rails action_text:install

This 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.

这将添加操作文本所需的所有依赖项。 最值得注意的是，这将添加一个新文件javascript / packs / application.js和两个动作存储迁移。

Run the migrations again using

使用以下命令再次运行迁移

rails db:migrate

Now we can add the text part of our model. Go to app/models/article.rb and add the following line

现在，我们可以添加模型的文本部分。 转到app / models / article.rb并添加以下行

has_rich_text :text

has_rich_text :text

text is the field name we are providing. It can be anything like body or content etc.

text是我们提供的字段名称。 它可以是诸如身体或内容之类的任何东西。

Now our model becomes

现在我们的模型变成

class Article < ApplicationRecord has_rich_text :textend

Before we build our form, let’s 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) end

end

We can now create the form for the blog. In app/views/articles/new.rb add the following form code:

现在，我们可以为博客创建表单。 在app / views / articles / new.rb中添加以下表单代码：

<%= 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 form.rich_text_area which is provided by Action Text.

注意，对于文本字段，我们使用form.rich_text_area 由操作文本提供。

Let us render our page:

让我们渲染页面：

Awesome!!

太棒了!!

We now have an awesome text editor for creating our article.

现在，我们有了一个很棒的文本编辑器来创建我们的文章。

Before we start playing with the editor, let’s 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:

在app / controllers / articles_controller.rb中添加以下功能：

def show   @article = Article.find(params[:id]) end

Also, we need to create a view for this.

另外，我们需要为此创建一个视图。

Create the file app/views/articles/show.html.erb and add the following code:

创建文件app / views / articles / show.html.erb并添加以下代码：

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

而已。 我们的应用程序完成了。 现在，让我们检查一下ActionText提供的文本编辑器中的各种功能。

We can see that ActionText provides almost all the functionalities of a normal rich text-editor like formatting the text as bold, italic, adding strike-throughs, quotes, links, dragging and dropping images, etc.

我们可以看到ActionText提供了普通富文本编辑器的几乎所有功能，例如将文本格式设置为粗体，斜体，添加删除线，引号，链接，拖放图像等。

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.

这是一个很小的示例，显示了ActionText的潜力。 希望对您有所帮助。 尝试一下。

A vast majority of web apps deal with rich content in some way. So I believe this new feature of Rails can make the lives of many developers easier.

绝大多数Web应用程序都以某种方式处理丰富的内容。 因此，我相信Rails的这一新功能可以使许多开发人员的生活更加轻松。

Kudos to DHH and all the awesome people behind this.

对DHH及其背后的所有真棒人士表示敬意。

https://github.com/amkurian/Rails-6.0_action_text_demo

https://github.com/amkurian/Rails-6.0_action_text_demo

Some Useful Links:

一些有用的链接：

Action 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

操作文本概述 -Ruby on Rails指南 操作文本概述本指南为您提供了开始处理富文本内容所需的全部信息。... Edgeguides.rubyonrails.org

翻译自: https://www.freecodecamp.org/news/quick-look-at-action-text-in-rails-6-0-12a8f9f7597f/

rails .try