Edited at

ActionText触ってみた件


ActionText触ってみた件

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

https://www.youtube.com/watch?v=HJZ9TnKrt7Q

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

スクリーンショット 2018-12-03 13.49.55.png


実際に触ってみた

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周りがいじれる。

image.png


ここからが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.png


まとめ

image_processingは最初のうちに入れておかないとapp/javascript/packs/application.jsにappendされないから正しく動かない。

そこだけ気をつければ簡単にセットアップできる。

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