Ruby on Rails | Action Textの利用

↓↓クリックして頂けると励みになります。

Ruby on Railsで利用できるAction Textを使えば、リッチテキストフィールドを簡単に統合できます。
Action Textを導入する手順を順を追って説明します。


GemfileにAction Textを追加します。
以下のように、gem 'actiontext'を追加してください。

gem 'actiontext'

ターミナルで以下のコマンドを実行して、Gemをインストールします。

bundle install

Action Textのインストールジェネレータを実行します。
ターミナルで以下のコマンドを実行します。

rails action_text:install

このコマンドにより、Action Text用のマイグレーションファイルとJavascriptファイルが生成されます。


マイグレーションを実行して、データベースに必要なテーブルを作成します：

rails db:migrate

Action Textを使用したいモデル（通常はPostなどのモデル）に、has_rich_textメソッドを追加します。
例えば、PostモデルでAction Textを使用したい場合は以下のとおりです。

class Post < ApplicationRecord
  has_rich_text :content
end

ビューでAction Textフィールドを表示します。
例えば、app/views/posts/_form.html.erbでAction Textフィールドを表示する場合は以下のとおりです。

<div class="field">
  <%= form.label :content %>
  <%= form.rich_text_area :content %>
</div>

Webサーバーを起動して確認します。

rails server

これでAction Textが導入され、リッチテキストフィールドを使用できるようになります。
Action Textは、リッチテキストの編集と表示を容易にし、画像や埋め込みリンクなどのコンテンツを簡単に管理できるようにします。


導入の条件により、CSSが適用されず、型崩れを起こす場合があります。

型崩れ

その場合、「app/views/layouts/application.html.erb」ファイルの「stylesheet_pack_tag」の記述を「stylesheet_link_tag」に変更すれば、CSSが適用されます。

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

link_tagに変更

また、AmazonS3を導入していて、リッチテキストの中に画像をアップロードするにはAmazonS3のアクセス許可の設定をしなければなりません。
アクセス許可のタブの下部にある「Cross-Origin Resource Sharing (CORS)」の項目に以下の記述を追加して保存します。

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

画像のアップロードはこれでできるますが、表示させるには「mini_magick」と「image_processing」のgemをインストールする必要があります。

gem "mini_magick"
gem 'image_processing', '~> 1.2'

↓↓クリックして頂けると励みになります。