Rails ガイド

目次

1. はじめに
2. Trixと他のリッチテキストエディタを比較する
3. インストール
4. 例
5. スタイルのカスタマイズ

1 はじめに

Action Textを使って、Railsにリッチテキストコンテンツと編集機能を導入できます。Action Textに含まれているTrixエディタは、書式設定/リンク/引用/リスト/画像埋め込み/ギャラリーなどあらゆるものを扱えます。 Trixエディタが生成するリッチテキストコンテンツは独自のRichTextモデルに保存され、このモデルはアプリケーションの既存のあらゆるActive Recordモデルと関連付けられます。 あらゆる埋め込み画像（およびその他の添付ファイル）は自動的にActive Storageに保存され、includeされたRichTextモデルに関連付けられます。

2 Trixと他のリッチテキストエディタを比較する

ほとんどのWYSIWYGエディタは、HTMLのcontenteditableやexecCommand APIのラッパーです。これはマイクロソフトがInternet Explorer 5.5のライブエディット機能をサポートするために設計したもので、最終的にリバースエンジニアリングされて他のブラウザに普及しました。

これらのAPIの仕様やドキュメントは永遠に未完成のままであり、かつWYSIWYG HTMLエディタが扱う範囲が広大なため、ブラウザの実装ごとに独自のバグやおかしな動作が発生しています。ブラウザ間の動作のぶれの解決はJavaScript開発者たちに任せきりの状態です。

TrixではcontenteditableをI/Oデバイスとして扱うことで、こうしたブラウザ間の動作のぶれを回避しました。エディタに独自の方法で入力されると、Trixはその入力を内部のドキュメントモデル上での編集操作に変換してから、ドキュメントをエディタ上で再レンダリングします。これにより、Trixはあらゆるキーストロークで発生するものを完全に制御し、execCommandを使う必要性をすべて回避しています。

3 インストール

rails action_text:installを実行すると、Yarnパッケージが追加され、必要なマイグレーションがコピーされます。また、埋め込み画像や他の添付ファイルを扱うためにActive Storageのセットアップも必要です。詳しくはActive Storageの概要ガイドを参照してください。

4 例

既存のモデルにリッチテキストのフィールドを追加するには次のようにします。

# app/models/message.rb
class Message < ApplicationRecord
  has_rich_text :content
end

続いて、モデルのこのフィールドをフォーム内で参照します。

<%# app/views/messages/_form.html.erb %>
<%= form_with(model: message) do |form| %>
  <div class="field">
    <%= form.label :content %>
    <%= form.rich_text_area :content %>
  </div>
<% end %>

最後に、sanitize済みのリッチテキストをページ上に表示します。

<%= @message.content %>

リッチテキストコンテンツを受け取れるようにするには、参照される属性を許可するだけで済みます。

class MessagesController < ApplicationController
  def create
    message = Message.create! params.require(:message).permit(:title, :content)
    redirect_to message
  end
end

5 スタイルのカスタマイズ

Action Textエディタとコンテンツのスタイルには、デフォルトではTrixのデフォルトが使われます。これらのデフォルトを変更したい場合は、app/assets/stylesheets/actiontext.cssリンカーを削除して、trix.cssを元にスタイルを付けます。

埋め込み画像やその他の添付ファイル（いわゆるblob）で使われるHTMLにスタイルを付けることもできます。Action Textをインストールすると、パーシャルがapp/views/active_storage/blobs/_blob.html.erbにコピーされるので、これをカスタマイズできます。

🖋 GitHubで編集を提案する / 📕 英語で読む

フィードバックについて

Railsガイドは GitHub の yasslab/railsguides.jp で管理・公開されております。本ガイドを読んで気になる文章や間違ったコードを見かけたら、気軽に Pull Request を出して頂けると嬉しいです。Pull Request の送り方については GitHub の README をご参照ください。

原著における間違いを見つけたら『Rails のドキュメントに貢献する』を参考にしながらぜひ Rails コミュニティに貢献してみてください 🛠💨✨

本ガイドの品質向上に向けて、皆さまのご協力が得られれば嬉しいです。

Railsガイド運営チーム (@RailsGuidesJP)

支援・協賛

Railsガイドは下記の協賛企業から継続的な支援を受けています。支援・協賛にご興味あれば協賛プランからお問い合わせいただけると嬉しいです。

1. Star
2.