How to implement gem "summer note" in wysiwyg editor in Ruby on Rails

When I implemented the wysiwyg editor using the gem "summer note", I implemented it somehow, so I will write it here again.

summernote Official page

What to create

・ A function that allows you to post articles using the gem "summer note" -Use the gem "public_uid" to make the article ID a random character string like the article of qiita

① Rich text editor creation procedure

STEP1: Install gem

`Gemfile`


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

bundle install

STEP2: Create Model

Various names are optional

rails g model article title:string message:text

STEP3: Preparation for scss

`application.scss`


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

STEP3: Preparation for 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 .

STEP4: Create input form

I am using bootstrap. Please code the HTML/CSS part as you like.

`erb:_form.html.erb`


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

    <div class="form-group">
        <label class="label-leftline">Please enter a title</label>
        <%= f.text_field :title , value:@article.title ,class:"form-control" ,placeholder: "Enter the title of the article" %>
    </div>
    <div class="row">
        <div class="col-12 col-sm-9">

        <div class="form-group">
                <label class="label-leftline">Enter the text</label>
                <%= f.text_area :message ,value:@article.message,'data-provider': :summernote,id:"summernote"%>
        </div>

            <div id="question-register-button-div" class="text-center">
                <%= f.submit "Post", class:"btn" %>
            </div>

        </div>

    </div>

<% end %>

STEP5: Create input screen

`erb:new.html.erb`


<div class="container">
    <div class="row">
        <div class="col-12">
                    <div>
                        <h1>Create New</h1>
                    </div>
                        <%= render 'form' %>   
        </div>
    </div>
</div>

You should now see a rich text editor!

If for some reason the rich text editor doesn't appear

If not displayed at all

When it is not displayed at all and I am in trouble, I wrote a script and solved it. Please try it if you like.

If anyone knows the root cause and solution that are not displayed, we would appreciate it if you could teach us.

`erb:_form.html.erb`


<script>
    $(document).ready(function() { $('#summernote').summernote({ placeholder: 'Enter the article body', tabsize: 3, height: 500 }); });
</script>

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

If it is not displayed without updating

In this case, turbolinks may be doing something wrong.

For more information on turbolinks, please refer to this article. What are Turbolinks

The important thing in this story is that "normally, the load event occurs when the page is loaded, but when the screen is switched by Turbolinks, the load event does not occur."

In summernote, it is reflected by jquery when the screen is displayed, so if there is turblinks, it will not work and it will not be displayed when opened ... For some reason it will be displayed when reloading ... Therefore, let's disable turbolinks for this trouble.

Reference site

[Rails] How to disable turbolinks I learned from the reference site and partially disabled turbolinks only on the input page

`Html before transitioning to the entry page.erb`


     <!--'data-turbolinks':false to link_Add to to-->
     <%= link_to "To create a new article",new_article_path ,class: "btn",'data-turbolinks': false %>

(2) Procedure to make the ID displayed in the URL of the record (article) created with the rich text editor a random character string like the article of qiita

STEP1: Install gem

`Gemfile`


gem 'public_uid'

STEP2: Add a column for public_uid to the model

$ 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

Specify the index to public_uid in the migration file.

$ rails db:migrate

STEP3: Add code to automatically generate public_uid to the model

`/app/models/article.rb`


class Article < ApplicationRecord
  generate_public_uid
end

All you have to do is add the code "generate_public_uid" to your model file. With this code, an 8-digit random character string will be automatically registered in public_uid when the model is registered in the DB.

STEP4: Override to_param method

`/app/models/article.rb`


class Article < ApplicationRecord
  generate_public_uid

  def to_param
    public_uid
  end

end

Override the to_param method and change the: id in the URL to: public_uid.

Complete!!

Reference page

[Rails] Create a blog where you can post images using summernote

[Rails] Display a random character string instead of id in the URL