Action TextとTailwind cssを組み合わせるとcss効かなくなった😇
・Action Textでリッチテキストを実装したい人
・Tailwind cssと一緒に使ってcssが効かない問題が起こっている人
・Action Textのcssをカスタマイズしたい人
の参考になれば幸いです。
Railsは公式のリッチテキスト実装Gem：Action Textがある
公式にリッチテキスト用意されてるのすごいよね。
基本的に書いてあるままですぐ実装できます。
Railsガイドの手順に沿って記載していきます。
インストール
$ rails action_text:install
コマンドを打つと下記ファイルが作成されます
[Action_Text d65a95a] ⌨️ rails action_text:install
11 files changed, 166 insertions(+), 3 deletions(-)
create mode 100644 app/assets/stylesheets/actiontext.css
create mode 100644 app/views/active_storage/blobs/_blob.html.erb
create mode 100644 app/views/layouts/action_text/contents/_content.html.erb
create mode 100644 db/migrate/20230628051607_create_active_storage_tables.active_storage.rb
create mode 100644 db/migrate/20230628051608_create_action_text_tables.action_text.rb
create mode 100644 test/fixtures/action_text/rich_texts.yml
migrationファイルも追加されたので
$ rails db:migrate
application.jsにimport （esbuildを使用しています。）
コマンドを打ったら自動で追加されますが、私の場合、他のimportの後に改行されずに追加されていて適用されていなかったので、入っているか確認してください。
import "trix"
import "@rails/actiontext"
application.tailwind.cssにimport
⚠️この部分、Tailwindのスタイルが適用されない問題が起こりました。
が、まずはAction Textの導入について全て書いた後説明します。
actiontext.cssも、コマンドを打つと最下部に自動で追加されますが、Tailwind cssを使用している場合@import文は@tailwindよりも上に置かないと読み込まれません。
@import './top.css';
@import 'actiontext.css'; /*@tailwindよりも上に追加*/
@tailwind base;
@tailwind components;
@tailwind utilities;
リッチテキストを導入したいモデルにコードを追加する
postでもboardでも使いたいモデルに追記。ここではRailsガイド通りmessageモデルで。
class Message < ApplicationRecord
has_rich_text :content
end
新しいモデルを作成するときは
bin/rails generate model Message content:rich_text
コマンドで作れるそうです
リッチテキストにしたいformをrich_text_areaにする
<%= form_with model: message do |form| %>
<div class="field">
<%= form.label :content %>
<%= form.rich_text_area :content %> #ここがリッチテキストになる
</div>
<% end %>
カラム名はcontentじゃなくてもbodyとかnoteとかなんでも大丈夫です。
申し訳ありません、contentじゃないとダメだった😇bodyとかnoteとかでもcontent。カラムを追加する必要はありません。
ちなみに、contentじゃないbodyとかnoteのカラムを指定するとhtml形式で表示されました。
contentにするとこうなる
controllerで受け取る
paramsに:contentを追加
class MessagesController < ApplicationController
def create
message = Message.create! params.require(:message).permit(:title, :content) #:contentを追加
redirect_to message
end
end
viewで表示するには
<%= @message.content %>
これだけ。簡単です。すごい。
自動で作成された_content.html.erbが<%= yield %>に読み込まれ、リッチテキストフォームが表示されているはずです。
ん？🥹
んん？？😇
思ってたんと違う🙃
どうやら、cssが効いてないらしい。加えて、Tailwind cssのスタイルも効かなくなりました🫰
Tailwind css使用時にAction Textを読み込む方法
調べていると、こちらのissueを発見。
日本語訳しながら見ていくと、みんなお困りの様子。強うそうな人たちが困ってる。わかる。適用されないよね？
え、 Bootstrapも適用されない？無理系？
と思ったら、救世主。
app/views/layouts/application.html.erbに次の行を追加する：
<%= stylesheet_link_tag "actiontext", "data-turbo-track": "reload" %>。
app/assets/config/manifest.jsにこの行を追加する：
//= link actiontext.css
そして、application.tailwind.cssからimport "actiontext.css "を削除した。
issue内、大絶賛の嵐。importmapやBootstrapでもこの方法が有効なようです。
Thank you zahidalikさん！
ということで直してみると適用されました。
フォームのボタンやデザインを編集する
フォームの高さや色の変更
actiontext.cssでスタイルを当てていきます。
trix-editor {
border: 2px outset #bbf7d0;
height: 200px;
rows: 10;
}
ボタンの削除
Action Textの画像のアップロード機能はActive Recordを使用しています。ファイルからドロップダウンで画像を挿入できたりしてめっちゃ便利みたいです。
ただ今回は既にcarrierwaveを用いた画像アップロード機能や加工機能を作成してしまっていたので、クリップのボタンを消したいと思います。
検証ツールで該当部分のclass名を確認します
該当のクラスに対して下記のように書きます。
.trix-button--icon-attach {
display: none !important;
}
できました。他にもボタンのアイコンを変更したりできるようです。
スクロールできるようにする
行数が増えてくると文字がフォームをはみ出してしまいますが、それをスクロールにしたいと思います。
Tailwind cssは便利なクラスがあるので紹介しておきます。
<%= f.rich_text_area :content, class: "overflow-auto" %>
余談：
Railsガイドで
デフォルトでは、Action Textは.trix-content CSSクラスを宣言した要素内でリッチテキストコンテンツをレンダリングします。
って書いてあったのでapp/views/layouts/application.html.erbの<%= yield %>を囲むdivタグにclass="trix-content"つけたら、Tailwind書いてもうんともすんとも反応しなくなりました。
最初のコマンド打った時に、自動でapp/views/layouts/action_text/contents/_content.html.erbというファイルができており、ここに既に定義されてました。
Tailwindの一部は反映されてたのでなかなか気付けずちょっと時間使ったので忘備録に。