Rails6.0 Beta版本1: ActionText的簡單使用

 

主要功能是新增2個主要的框架Mailbox和action Text.

和2個重要的可擴展的升級： multiple databases support和parallel testing.

 

Action Text

https://edgeguides.rubyonrails.org/action_text_overview.html

Trix，一個文本編輯器。能夠改變links，quotes，lists，嵌套圖片，galleries等等的樣式。

Rails6增長了這個編輯器。

這個由Trix editor生成的編輯器text content被保存在它本身的RichText model。和現存的ActiveRecord model關聯。

使用Active Storage, 任何嵌套的圖片自動儲存，並關聯着RichText model。

 

Rails視頻案例：

https://gorails.com/episodes/how-to-use-action-text?autoplay=1

先下載rails6.0.beta1。

而後：

rails new -m template.rb mentions或者下載上面鏈接的源代碼。這個app名字是mentions.

而後安裝stimulus，用來創建app mention JS functionality,  並使用serbs tribute j/s 庫來產生自動的drop-down功能 .

cd mentions
rails webpacker:install:stimulus

 

rails active_storage:install
rails action_text:install

 

最後rails db:migrate, 產生幾個model。

rails generate scaffold Post title:string

 

再rails db:migrate生產model

打開post.rb文件：

class Post < ApplicationRecord
 has_rich_text :body
end

 

而後在app/views/posts/_form.html.erb：

<%= form_with(model: post, local: true) do |form| %>
  ...
  <div class="form-group">
    <%= form.label :body %>
    <%= form.rich_text_area :body, class: 'form-control'%>
  </div>
  ...
<% end %>

 

最後rails server, 打開localhost:3000/posts

 

可是不能使用圖標的模式css：須要在app/assets/stylesheets/application.scss內進口：

//= require actiontext

而後就能夠使用

<%= @post.body %>
／／爲了接受rich text content,要加上參數白名單

 

還能夠拖拉圖片。由於使用了stimulus。

但圖片不會正確顯示，須要下載gem 'image_processing'

bundle install後重啓rails s，就能夠看到保存的圖片了。

若是圖片太大，輸入框會被超出，這時須要修改css樣式：

// app/assets/stylesheets/actiontext.scss //除了默認的樣式，還能夠使用其餘的樣式。這個鏈接提供了大量樣式contents of that file. 能夠基於此自定義。
trix-editor {
  &.form-control {
    height: auto;
  }
}