🏋️♀️
【Rails】Action Textの導入（直感的に使えるテキスト編集エディタ）
Action Textとは
簡単に『WYSIWYG』と呼ばれるエディターを実装できるようになるライブラリ。
WYSIWYG（ウィジウィグ）：
「あなたが見るものがあなたが得るもの（What You See Is What You Get）」を意味する。
テキストやコンテンツを編集する際に、編集画面上で表示される内容が最終的な出力結果と同じになること。
主な特徴
| 機能 | 説明 |
|---|---|
| リッチテキスト編集 | テキストエディタ内でテキストだけでなく、画像、ビデオ、HTMLコードなどのリッチコンテンツを追加可能。 |
| Trixエディタ | Trixエディタで直感的に編集できる。文字を書いたり、画像をアップロードしたり、埋め込みコードを追加したりする際、編集画面で見たままの表示と実際の表示が同じ。 |
| Active Storage統合 | Active Storageと統合しており、アップロードされた画像やファイルを処理し、コンテンツ内に埋め込み可能。 |
| セキュリティ | セキュリティリスクを最小限に抑えるための対策が施されており、アクセス制御や悪意あるコードの防止などを提供。 |
実際の編集画面
文字を大きくしたり、太字にしたり、段落をつけることも可能！
リンクや画像の投稿も直感的で簡単にできる。
実装
事前準備
Active Storageのインストール
Active Storageを使って画像などのアップロード処理をするので導入が必要。
ターミナル
rails active_storage:install
Active Textのインストール
ターミナル
rails action_text:install
マイグレーションの実行
ターミナル
rails db:migrate
モデル追記
Action Textを使用したいモデルに以下を記載。
post.rb
class Post < ApplicationRecord
# action textの使用
has_rich_text :content
:
end
コントローラ内のストロングパラメータの設定
コントローラ内でストロングパラメータを設定してAction Textの内容を許可する。
posts_controller.rb
class Public::PostsController < ApplicationController
:
private
def post_params
params.require(:post).permit(:title, :content)
end
end
ビューでの使用
投稿/編集フォーム
以下のように記載することで、表示できるようになる。
posts/_form.html.erb
<%= form_with(model: @post) do |form| %>
+ <%= f.rich_text_area :content %>
<% end %>
<%= f.rich_text_area :content %>を指定するだけで使えるようになる！
詳細ページ
以下を追記するだけで、Action Textで入力した本文を表示できる。
posts/show.html.erb
:
<%= @post.content %>
:
参照
簡単かつ便利機能だったのでスクラムの皆さんにも紹介しました。
Discussion