LoginSignup
5

More than 1 year has passed since last update.

【rails】テキストエディターの実装(summernote)

Last updated at Posted at 2021-05-13

実装すること

・gem summernoteを使用して、投稿フォームをテキストエディターにする。
・テキストエディターでリンクや画像の投稿も簡単。

公式: https://summernote.org/
Github: https://github.com/summernote/summernote-rails
参考記事
https://bagelee.com/programming/rails-wysiwyg-gem/

完成形

・ 見た事があるテキストエディターが表示され、投稿詳細にも反映されています。
・ 他にも画像の添付、文字の太さの変更など機能様々。

Hnet-image.gif

前提

下記の機能実装済み。

・ devise機能(今回は、memberモデル)
・ 投稿機能(今回は、questionモデル)

shema.rb
ActiveRecord::Schema.define(version: 2021_05_05_122222) do

  create_table "members", force: :cascade do |t|
    t.string "email", default: "", null: false
    t.string "encrypted_password", default: "", null: false
    t.datetime "remember_created_at"
    t.string "name", default: "", null: false
    t.datetime "created_at", null: false
    t.datetime "updated_at", null: false
    t.index ["email"], name: "index_members_on_email", unique: true"index_members_on_reset_password_token", unique: true
  end

  create_table "questions", force: :cascade do |t|
    t.integer "member_id", null: false
    t.string "title", default: "", null: false
    t.text "content", null: false
    t.datetime "created_at", null: false
    t.datetime "updated_at", null: false
    t.index ["member_id"], name: "index_questions_on_member_id"
  end
end

手順

  1. gem"summernote"のインストール
  2. assetsのcss/scss + jsファイルへの追記
  3. summernote-init.coffeeの作成
  4. viewへの記載①
  5. viewへの記載②

実装

1. gem"summernote"のインストール

gemをインストールします。
ただ、githubを見る限り、summernote+他のGemも同時にインストールします。
もし、既にインストールしているものがあれば、それを除いたものをインストールしましょう。

simple_formに関しては、
viewの書き方で使うか使わないかなので、「viewへの記載」をインストールするか判断してください。

Gemfile
gem 'jquery-rails'
gem 'bootstrap', '~> 4.5'
gem 'simple_form'
gem 'summernote-rails', '~> 0.8.9'
terminal
$ bundle install

2. assetsのcss/scss + jsファイルへの追記

それぞれによって異なりますが、
application.css/scssファイル と jsファイルに下記を追加します。
@importは、外部のcssファイルを読み込む際に使う記述です。

下記のscssファイルにおいては、
"summernote-bs4.css"というcssファイルを読み込むようにしています。

assets/stylesheets/application.scss
 *= require social-share-button
 *= require_tree .
 *= require_self
 */      
@import "bootstrap";
@import "summernote-bs4";

application.jsも同様に読み込ませます。

assets/javascripts/application.js
//= require jquery3
//= require popper
//= require bootstrap-sprockets
//= require rails-ujs
//= require summernote/summernote-bs4.min
//= require summernote-init
//= require activestorage
//= require turbolinks
//= require_tree .
//= require social-share-button

3. summernote-init.coffeeの作成

先ほど下記を記載したかと思います。

//= require summernote-init

"summernote-init"のファイルは現状ない為、これから作成します。
これによってviewにテキストエディターを表示したり、カスタマイズしたりできます。

assets/javascripts/summernote-init.coffee
$(document).on 'turbolinks:load', ->
  $('[data-provider="summernote"]').each ->
    $(this).summernote
      placeholder:"質問したい内容を記入しよう。一番見て欲しい箇所は色をつけるなどで強調してみよう!"
      height: 300

4. viewへの記載 ①

先ほどsummernote-init.coffeeを機能させるには、下記をviewに記載する必要があります。

assets/javascripts/summernote-init.coffee
[data-provider="summernote"]

なので、text_areaの中に記述します。、

questions/new.html.erb(抜粋)
<div class="form-group">
  <p class="font-weight-bold"><%= f.label :質問内容 %></p>
  <p><%= f.text_area :content, class:"form-control w-100", 'data-provider': :summernote %></p>
</div>

これによってcoffeeファイル(js)がその箇所と連動し、表示されます。

新規投稿画面にテキストエディターが表示されたかと思います。

【こちらは全文です。】

questions/new.html.erb
<%= form_with model: @question, local: true do |f| %>
  <%= render "layouts/error_messages", resource: @question %>
  <div class="form-group">
    <p class="font-weight-bold"><%= f.label :質問タイトル %></p>
    <%= f.text_field :title, placeholder: "タイトルを記入しましょう。(5〜50文字以内)", class:"form-control w-100" %>
  </div>
  <div class="form-group">
    <p class="font-weight-bold"><%= f.label :タグ %>(0個からいくつでも選択可能です。)</p>
    <p><%= f.collection_check_boxes :tag_ids, Tag.all, :id, :name, class:"form-control", prompt:"この中からタグを1つ選んでください。", mutiple: true %></p>
  </div>
  <div class="form-group">
    <p class="font-weight-bold"><%= f.label :質問内容 %></p>
    <p><%= f.text_area :content, class:"form-control w-100", 'data-provider': :summernote %></p>
  </div>
  <div class="form-action">
    <%= f.submit "質問する", class:"btn btn-success w-100" %>
  </div>
<% end %>

5. viewへの記載 ②

最後にテキストエディターで投稿した文字の表示設定をします。

今のままでは、画像のようにタグが表示されているかと思います.
スクリーンショット 2021-05-14 1.38.20.png

これを正しく表示させるための記述を投稿詳細のviewに手を加えます。

解決策: https://qiita.com/iwamot/items/74c2bd9ebd3ac6458837

記事に書いてるエスケープ処理を使います。

questions/new.html.erb
<div class="questions-content offset-md-2">
  <h4><%== question.content %></h4>
</div>

通常:  <%= %>
今回:  <%== %>

と = を2つつけます。
これによってview側での表示がテキストエディターでの文字設定が反映されます。

これで基本的にsummernoteは実装できたかと思います!!

補足:原因不明のエラーに関して

無事実装でき、最初は表示されていたのですが、
突然表示されなかったり、エラーが出て動かなくなる。などがありました。

もしかしたらこれを参考にした方も同じ事が起きるかも??しれません、、、、。
これに関して正直、なぜ起きたのか原因はわからずでした、、。

解決策としては、summernote.js をassetsファイルに格納したところ動きました。
参考までに。

以上です。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5