ActionText（Trix Editor）

Action Text（Trix Editor）（2025 年版）

Action Text は Rails 標準のリッチテキストエディタ（Trix） を利用できる仕組みです。 Rails 8 ではアセット管理方式が Webpacker 廃止後の仕組みに統一され、Action Text の読み込み方法にも影響が出ています。

このページでは、Rails 7 → Rails 8 の変化点 と 導入方法 を中心にまとめます。

---

■ アセット管理方式が完全移行

Rails 8 では次のいずれかの方式で JS / CSS を管理します。

• Importmap（Rails 8 デフォルト）
• ESBuild
• Bun
• Vite（rails-vite）

Action Text（Trix）もこれらの方式に従って読み込む必要があります。

---

■ Importmap を使う場合

◇ importmap.rb に追加

pin "trix"
pin "@rails/actiontext"

◇ レイアウト内の JS 読み込み（※ < > を全角化しています）

＜%= javascript_importmap_tags %＞

---

■ ESBuild / Bun を使う場合

◇ application.js に追記

import "trix"
import "@rails/actiontext"

◇ CSS 読み込み

import "trix/dist/trix.css"

---

■ Vite（rails-vite）を使う場合

◇ app/frontend/entrypoints/application.js に追記

import "trix"
import "@rails/actiontext"
import "trix/dist/trix.css"

---

■ 添付ファイル関連（Rails 8 でも変わらず使用可能）

Action Text × Active Storage の次の機能は Rails 8 でも同じです。

• 画像のドラッグ＆ドロップ貼り付け
• ファイル添付（Blob 管理）
• アップロード時のプレビュー

---

■ Trix Editor（Rails 8 同梱版）の改善点

Rails 8 に同梱される Trix はアップデートされており：

• Undo/Redo の安定化
• セキュリティ強化
• モバイル端末での入力改善
• デフォルト CSS の微調整 過去バージョンの Trix をカスタムしていた場合は挙動が変わる可能性があります。

---

■ カスタムツールバーも従来どおり利用可能

例

＜trix-toolbar＞
  ＜button data-trix-attribute="underline"＞U＜/button＞
＜/trix-toolbar＞

---

■ Rails 8 でのセットアップ（Importmap 前提）

◇ Action Text のインストール

bin/rails action_text:install

◇ 自動生成される主なファイル

• app/assets/stylesheets/actiontext.css
• app/views/active_storage/blobs/_blob.html.erb

◇ レイアウトで CSS を読み込み

＜%= stylesheet_link_tag "actiontext", "data-turbo-track": "reload" %＞

---

■ まとめ

• Rails 8 では Webpacker 廃止 → 新方式へ完全移行
• Action Text の読み込み方法が利用する JS 方式によって異なる
• 画像添付やドラッグ＆ドロップなどの基本仕様は従来どおり
• Trix のバージョンアップで動作改善あり
• Rails 8 で導入する場合は Importmap の設定が最もシンプル