Ruby on Railsでwysiwygエディタのgem「summernote」 実装方法
wysiwygエディタをgem「summernote」を用いて実装した際、なんとなくで実装してしまっていたため、改めてここに書いておこうと思います。
summernote
作成するもの
・gem「summernote」を用いて記事投稿できる機能
・gem「public_uid」を用いて記事のIDはqiitaの記事の様にランダムの文字列にする
①リッチテキストエディタ作成手順
STEP1 : gem をインストール
gem 'summernote-rails'
gem 'jquery-rails'
gem 'bootstrap'
bundle install
STEP2 : Modelを作成
各種名前は任意で
rails g model article title:string message:text
STEP3 : scssの準備
@import "bootstrap";
@import "summernote-bs4";
STEP3 : jsの準備
//= require jquery
//= require jquery_ujs
//= require popper
//= require bootstrap
//= require summernote/summernote-bs4.min
//= require summernote-init
//= require activestorage
//= require turbolinks
//= require_tree .
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.js" defer></script>
</head>
STEP4: 入力formの作成
※bootstrapを利用しています。HTML/CSS部分については各自お好きな様にコーディングください。
<%= 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: 入力画面の作成
<div class="container">
<div class="row">
<div class="col-12">
<div>
<h1>新規作成</h1>
</div>
<%= render 'form' %>
</div>
</div>
</div>
これでリッチテキストエディタが表示されるはず!
なぜかリッチテキストエディタが表示されない場合
全く表示されない場合
全く表示されなく、困っている際、scriptを記載し解消したことがあります。
よろしければやってみてください。
※もし、表示されない根本的な原因と解決策について、ご存知な方がいらっしゃいましたらご教授いただけますと幸いです。
<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を無効化しています
<!--'data-turbolinks': false を link_toに追加 -->
<%= link_to "記事新規作成へ",new_article_path ,class: "btn",'data-turbolinks': false %>
②リッチテキストエディタで作成したレコード（記事）のURLに表示されるIDをqiitaの記事の様にランダムの文字列にする手順
STEP1 : gem をインストール
gem 'public_uid'
STEP2 : モデルにpublic_uid用のカラムを追加する
$ rails g migration AddPublicUidToArticle public_uid:string
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を自動生成するコードを追記
class Article < ApplicationRecord
generate_public_uid
end
対象のモデルファイルに「generate_public_uid」というコードを追加するだけで完了です。
このコードによってモデルがDBに登録されるタイミングで自動的にpublic_uidに8桁のランダムな文字列が登録される様になります。
STEP4: to_paramメソッドをオーバーライド
class Article < ApplicationRecord
generate_public_uid
def to_param
public_uid
end
end
to_paramメソッドをオーバーライドし、URLの:idを:public_uidに変更します。
完成!!