Ruby on Rails 【rich_text_area】Bootstrap4.5で型が崩れる時の対処法


投稿日:2020年09月28日 (月)
Rails6.0・Bootstrap4.5で実装し、アクションテキストをインストールしました。
rich_text_areaを使おうとしたら以下のように型がテキストエリアの型が崩れるという現象が起きました。

アクションテキストエリアの表示が崩れる.png 127KB


このような場合の対処法を解説します。

まずは順番にアクションテキストのインストールからです。

rails action_text:install

マイグレーションを適用します。
rails db:migrate


モデルに「:description」フィールドを宣言します。
has_rich_text :description


ビューに「rich_text_area」の記述を追加します。
<div class="form-group">
  <%= f.label :説明 %>
  <%= f.rich_text_area :description %>
</div>


本来ならこれでリッチテキストが使えますが、このままでは「trix」がうまく読み込まれないので型崩れを起こしてしまいます。
そこで「application.scss」ファイルに以下の記述を追加します。

@import "trix/dist/trix";

これにより「trix」が読み込まれるようになり、以下のように型くずれのないリッチテキストエリアが表示されるようになりました。

アクションテキスト表示成功.png 128KB



Rails6.0 Windows MacOSX

動画学習サイトの構築 Rails6.0

  0 (0)

タスク   128

2,000円

    サンプルサイトは初期起動に15秒ほどかかります。

 
Rails6.0 Windows MacOSX

民泊サイトの構築 Rails6.0

  0 (0)

タスク   128

3,000円

    サンプルサイトは初期起動に15秒ほどかかります。

 
Rails5.0 Windows MacOSX

動画学習サイトの構築 Rails5.0

  0 (0)

タスク   100

1,000円

    サンプルサイトは初期起動に15秒ほどかかります。

 
Rails6.0 Windows MacOSX

お仕事売買サイトの構築 Rails6.0

  0 (0)

タスク   146

3,000円

    サンプルサイトは初期起動に15秒ほどかかります。

 
Rails5.0 Windows MacOSX

民泊サイトの構築 Rails5.0

  0 (0)

タスク   136

2,000円

    サンプルサイトは初期起動に15秒ほどかかります。