##Ruby on Railsでwysiwygエディタのgem「summernote」実装方法
wysiwygエディタをgem「summernote」を用いて実装した際、なんとなくで実装してしまっていたため、改めてここに書いておこうと思います。

##summernote
公式ページ

##作成するもの
・gem「summernote」を用いて記事投稿できる機能
・gem「public_uid」を用いて記事のIDはqiitaの記事の様にランダムの文字列にする

##①リッチテキストエディタ作成手順
###STEP1 : gem　をインストール

Gemfile

gem 'summernote-rails'
gem 'jquery-rails'
gem 'bootstrap'

bundle install

###STEP2 : Modelを作成
各種名前は任意で

rails g model article title:string message:text

###STEP3 : scssの準備

application.scss

@import "bootstrap";
@import "summernote-bs4";

###STEP3 : jsの準備

application.js

//= require jquery
//= require jquery_ujs
//= require popper
//= require bootstrap
//= require summernote/summernote-bs4.min
//= require summernote-init
//= require activestorage
//= require turbolinks
//= require_tree .

application.hrml.erb

<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.js" defer></script>
</head>

###STEP4: 入力formの作成
※bootstrapを利用しています。HTML/CSS部分については各自お好きな様にコーディングください。

_form.html.erb

<%= form_with model: @article,local: true do|f| %>

    <div class="form-group">
        <label class="label-leftline">タイトルを入力して下さい</label>
        <%= f.text_field :title , value:@article.title ,class:"form-control" ,placeholder: "記事のタイトルを入力します" %>
    </div>
    <div class="row">
        <div class="col-12 col-sm-9">

        <div class="form-group">
                <label class="label-leftline">本文を入力しましょう</label>
                <%= f.text_area :message ,value:@article.message,'data-provider': :summernote,id:"summernote"%>
        </div>

            <div>
                <%= f.submit "投稿", class:"btn" %>
            </div>

        </div>

    </div>

<% end %>

###STEP5: 入力画面の作成

new.html.erb

<div class="container">
    <div class="row">
        <div class="col-12">
                    <div>
                        <h1>新規作成</h1>
                    </div>
                        <%= render 'form' %>   
        </div>
    </div>
</div>

これでリッチテキストエディタが表示されるはず!

##なぜかリッチテキストエディタが表示されない場合

###全く表示されない場合
全く表示されなく、困っている際、scriptを記載し解消したことがあります。
よろしければやってみてください。
※もし、表示されない根本的な原因と解決策について、ご存知な方がいらっしゃいましたらご教授いただけますと幸いです。

_form.html.erb

<script>
    $(document).ready(function() { $('#summernote').summernote({ placeholder: '記事本文を入力しましょう', tabsize: 3, height: 500 }); });
</script>

     ・・・・
       <%= f.text_area :message ,value:@article.message,class: "article_content",style: "width: 100%;" %>
     ・・・・

###更新しないと表示されない場合
この場合、turbolinksが悪さをしている可能性があります。

※turbolinksについて詳しいのはこちらの記事が参考にどうぞ
Turbolinksってなんぞ

今回の話で大事なのは「通常であればページが読み込まれたタイミングで load イベントが発生しますが、Turbolinks によって画面が切り替わった場合は load イベントは発生しません。」というところです

summernoteでは画面表示時にjqueryで反映させますので、turblinksがあるとそれが機能せず開いた時に表示されない・・・何故かリロードすると表示される・・・という現象に陥ります。
そのため、このトラブルに対してはturbolinksを無効化してみましょう。

#####参考サイト
【Rails】turbolinksを無効化する方法
私は参考サイト先に習って、部分的に入力ページだけturbolinksを無効化しています

記入ページに遷移する前のhtml.erb

     <!--'data-turbolinks': false を link_toに追加 -->
     <%= link_to "記事新規作成へ",new_article_path ,class: "btn",'data-turbolinks': false %>

##②リッチテキストエディタで作成したレコード（記事）のURLに表示されるIDをqiitaの記事の様にランダムの文字列にする手順
###STEP1 : gem　をインストール

Gemfile

gem 'public_uid'

###STEP2 : モデルにpublic_uid用のカラムを追加する

$ rails g migration AddPublicUidToArticle public_uid:string

〇〇.rb

class AddPublicUidToArticle < ActiveRecord::Migration[6.0]
  def change
    add_column :articles, :public_uid, :string
    add_index  :articles, :public_uid, unique: true
  end
end

マイグレーションファイルにpublic_uidへのindexを指定します。

$ rails db:migrate

###STEP3: モデルにpublic_uidを自動生成するコードを追記

/app/models/article.rb

class Article < ApplicationRecord
  generate_public_uid
end

対象のモデルファイルに「generate_public_uid」というコードを追加するだけで完了です。
このコードによってモデルがDBに登録されるタイミングで自動的にpublic_uidに8桁のランダムな文字列が登録される様になります。

###STEP4: to_paramメソッドをオーバーライド

/app/models/article.rb

class Article < ApplicationRecord
  generate_public_uid

  def to_param
    public_uid
  end

end

to_paramメソッドをオーバーライドし、URLの:idを:public_uidに変更します。

完成!!

##参考ページ
【Rails】summernoteを使って画像も投稿できるブログを作る

【Rails】URLでidの代わりにランダムな文字列を表示させる