ActionTextつかってみたい

ActionTextを使ってテキストボックスに画像貼りたい

ActionTextを使うまで

Rails インストール

サンプルPJ作成

Rails起動時にWebpacker can't find application って表示された

  • WebPakerをインストールします

Webpackerインストールまで

  • 該当プロジェクトフォルダ(blog)へ cd blog
nodenv install 8.15.1
nodenv global 8.15.1
yarn
bin/yarn
npm install css-loader
npm install vue-loader
bundle exec rails webpacker:install
brew install imagemagick

インストール

Gemfile編集

vi Gemfile
# gem 'image_processing', '~> 1.2'
↓
gem 'image_processing', '~> 1.2'

インストール２

 bundle install
 bundle exec bin/rails action_text:install

モジュール作成

bundle exec bin/rails g scaffold post title:string
  • rubyのGenerateコマンド等でコンソールが固まったら
spring stop
bundle exec bin/rails db:create db:migrate

Model

  • Postモデルを編集
post.rb
  class Post < ApplicationRecord
    has_rich_text :content
  end

Controller

  • post_paramsでcontent許可する為以下を追記します。
posts_controller.rb
    def post_params
      params.require(:post).permit(:title, :content)
    end

View

  • リッチテキストを追加/参照できるようにViewを編集
posts/_form.html.erb
  <div class="field">
    <%= form.label :content %>
    <%= form.rich_text_area :content %>
  </div>
  • rich_text_areaの部分が参考にしたサイトはrich_text_fieldとなっており正常に動作せずはまった

起動確認

  • rails serverで起動確認
rails server

このようにテキストエリアに画像つきの文字列を埋め込める f:id:nmatsu2013:20190816225902p:plain