Action Text の概要

本ガイドでは、リッチテキストコンテンツの扱いを始めるのに必要なものをすべて提供します。

このガイドの内容:

1 はじめに

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

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

ほとんどのWYSIWYGエディタは、HTMLのcontenteditableexecCommand 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の概要ガイドを参照してください。

Also, you need to set up Active Storage for embedded images and other attachments. Please refer to the Active Storage Overview guide.

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

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

[PR] Railsガイドを、もっと便利に。

Railsガイドをもっと便利に使えるサービスをリリースしました! 本サービスで得られた売上はRailsガイドを継続的に更新・運営するために活用させていただきます。よければぜひご検討ください ;)

Proプラン Teamプラン

フィードバックについて

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

原著における間違いを見つけたら、「Ruby on Rails に貢献する方法」に記されている Rails のドキュメントに貢献するを参考にしながらぜひ Rails コミュニティに貢献してみてください :)

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

YassLab 株式会社
https://yasslab.jp/

支援・協賛

Railsガイドは下記のサポーターから継続的な支援を受けています。Railsガイドへの出稿 (支援・協賛枠) にご興味あれば info@yasslab.jp までご連絡ください。

  1. Takeyuweb: エンジニアリングをもっと自由に楽しく
  1. このエントリーをはてなブックマークに追加
  2. Star