今回、フォームに画像挿入機能などの機能を持ったリッチテキストエディタを実装する方法についてまとめていこうと思います。
拙い文章ですがお許しください。
Action Textの基礎知識
Action Textはリッチテキストを簡単に作成、編集、表示することができるフレームワークであり、Rails6から導入された機能になります。つまりこのAction Textを使えば、フォームで投稿する際、文章の修飾や画像の挿入を簡単にできるようになるのです。
インストール方法
こちらの方法は追加実装の方向けになります。もし新しく実装したい場合はRailsガイドをご参照ください。
Railsガイド
まず、Action Textをダウンロードします。
ターミナルで開いているアプリケーションのディレクトリに移動した以下のコマンドを実施します。
% rails action_text:install
このコマンドを実施すると、yarnパッケージが追加されて、必要なマイグレーションファイルが作成されます。
ここで注意して欲しいのですが、もしこれから実装するテキストエディタ部分のカラムがDBに存在するなら、必ずロールバックをしてそのカラムを削除してください。フォームのテキストエディタ部分のデータはこれから実装するAction Text専用のテーブルに保存されます。
確認して大丈夫でしたら、作成されたマイグレーションファイルをマイグレートしましょう。
rails db:migrate
次にActive Strageのセットアップをする必要があります。
Active Strageとは簡単に説明すると画像ファイルなどのアップロードや表示を簡単にできるGemになります。
まずimageMagickというツールをHomebrewからインストールする必要があります。以下のコマンドをターミナルに打ち込んでください。
% brew install imagemagick
そしてGemfileを開き、以下の２つのGemを記述してください。
# Gemfileの一番下に記述する
gem 'mini_magick'
gem 'image_processing', '~> 1.2'
そしてそれらをターミナルでbundle installします。
% bundle install
以上でActive Strageを使う上で必要なツールは揃いました。Active Storageをアプリケーション内で使用する準備を行います。
% rails active_storage:install
% rails db:migrate
こちらでActive Strageの導入は終了です。
そして次はモデルファイルに記述をしていきます。各自の実装したいモデルに以下の記述を行ってください。
class モデル < ApplicationRecord
has_one_attached :image
has_rich_text :content
end
続いてこちらのテキストエディタを表示したいビューファイルに以下のように記述します。
# app/views/○○○/_form.html.erb
<%= form_with(models: ○○○) do |form| %>
<div class="field">
<%= form.label :content %>
<%= form.rich_text_area :content %>
</div>
<% end %>
その後コントローラー内にて、ストロングパラメーターでリッチテキストエディタの内容を取得できるように記述したら、終了になります。