Actiontextを導入する

rails action_text:install

app/assets/stylesheets/actiontext.scss
test/fixtures/action_text/rich_texts.yml
app/views/active_storage/blobs/_blob.html.erb

db/migrate/以下にズラーっと出てくると思います。

そしておきまりの〜

bin/rails db:migrate

scaffoldで記事を投稿するモデルの雛形を作成

bin/rails g scaffold blog title:string

bin/rails db:migrate

リッチテキストを追加できるようする

 has_rich_text :body

def blog_params
   params.require(:blog).permit(:title, :body)
end

<div class="field">
    <%= form.label :記事内容 %>
    <%= form.rich_text_area :body %>
  </div>

<%= @blog.body %>

image_processingの追加

gem 'image_processing'

そしてbundle


bootstrap3の導入もしていたら下のような感じになっていると思います。

ちょめこのactiontextは、少しいじってありますがこんな感じになってます。

何をいじったかは後ほど説明します！！

これでactontextの導入は終わりです。

webpackerの標準化

rails６からwebpackerが標準化されたらしく、初学者のちょめこには何それ状態でした。

actiontext導入してもwebpackで管理できなくて、苦戦しまくりました。

当時はググってもググっても答えが見つからずに何日か詰まって凹んでたのはいい思い出w

/views/layouts/application.html.slimを変えます

= stylesheet_pack_tagと
= javascript_pack_tagの部分ですね

/channels .js関連
/images       画像
/packs   application.js
/stylesheets   .scss
これらが入っています。

まずは/packs/application.jsに追加していきます。

デフォルトですでに追加されているかもしれません。

/channels/ .js関連は

require("channels")ここで読み込んでます

require.context('../images', true)ここで読み込んでます

import "../stylesheets/reset"
import "../stylesheets/actiontext"
import "../stylesheets/application"
import "../stylesheets/custom"

require("trix")
require("@rails/actiontext")

@import '~trix/dist/trix';

= image_pack_tag 'media/images/〜〜〜.jpg'