ActionText触ってみた件

ActionText触ってみた件

Rails6.0からActionTextなるものが入るらしいとDHHというYoutuberから情報を得たので触ってみた。

こんな感じのリッチテキストがシュッとできちゃう。

実際に触ってみた

DHHの真似をしながら入れてみる。

Rails6.0.0のインストール

# railsリポジトリの最新
$ ./rails/rails/railties/exe/rails new action_text_app --edge

webpackとactiontextとimage_processingが必要なので入れる

gem 'webpacker', github: "rails/webpacker"
gem 'actiontext', github: 'rails/actiontext', require: 'action_text'
gem 'image_processing', '~> 1.2'

webpackのインストール

$ bundle exec rails webpacker:install 

actiontextのインストール

$ ./bin/rails action_text:install
$ ./bin/rails db:migrate

実際に投稿画面を作っていく

$ ./bin/rails g scaffold post title:string
$ ./bin/rails db:migrate

画面を確認してみる

$ ./bin/rails s

scaffoldしてあるので、/postsにアクセスするとこんな感じでpost周りがいじれる。

ここからがactiontextだ。

app/models/post.rb

class Post < ApplicationRecord
  has_rich_text :content
end

app/views/posts/_form.html.erb

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

app/views/posts/show.html.erb

# 追加
<%= @post.content %>

でたー

まとめ

image_processingは最初のうちに入れておかないとapp/javascript/packs/application.jsにappendされないから正しく動かない。
そこだけ気をつければ簡単にセットアップできる。

これのpreview機能とか早く出てくれれば使い勝手良さそう！