はじめに
Rails6で追加されたActionTextにリッチテキストコンテンツと編集機能を導入出来ます。
今までは自分で実装していたので、便利な機能だと思い、使い方を調べてみました！
使用方法
1.ActionTextのセットアップを行い、rails db:migrateを実行する。
$ rails action_text:install
$ rails db:migrate
2.埋め込み画像や他の添付ファイルを扱うため、ActiveStorageのセットアップを行う。
[参考]
3.使用するモデルにリッチテキストのフィールドを追加する。
app/models/message.rb
class Message < ApplicationRecord
has_rich_text :content
end
4.ビュー側でヘルパーメソッドを使用する。
<%= form_with(model: message) do |form| %>
<div class="field">
<%= form.label :content %>
<%= form.rich_text_area :content %>
</div>
<% end %>
5.リッチテキストを保存するためにコントローラーを設定する。
app/controllers/messages_controller.rb
class MessagesController < ApplicationController
def create
message = Message.create!(message_params)
redirect_to message
end
private
def message_params
params.require(:message).permit(:content)
end
end
利用時の注意点
N+1問題における注意
ActionTextは、ActionText::RichTextというモデルで管理されています。そのため、このリッチテキストが別テーブルで管理されていることを意識しないとN+1問題に遭遇します。
解決策として、専用のeager_load用メソッドがあり下記の2つです。
※「name」には、has_rich_textに渡した引数が入ります。
- with_rich_text_#{name}
- with_rich_text_#{name}_and_embeds
app/controllers/messages_controller.rb
class MessagesController < ApplicationController
...
def index
@messages = Message.with_rich_text_content
end
end
カスタマイズにおける注意
セットアップ時に、app/assets/stylesheets/actiontext.scssが生成されています。デザインを編集したい場合は、このファイルを修正するか、別のファイルを作成しましょう。
また、添付された画像のビューは、app/views/active_storage/blobs/_blob.html.erbで定義されています。このファイルを編集することで画像の見た目を整えられます。
終わりに
簡単な手順ではありますが、リッチテキストを導入できました！
正しい手順を踏めば誰でも導入可能だと思うので、ぜひお試しあれ！