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

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


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


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

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


<%= 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 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 id="question-register-button-div" class="text-center">
                <%= f.submit "Post", class:"btn" %>



<% end %>

STEP5: Create input screen


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

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.


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

・ ・ ・ ・
       <%= 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.

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


gem 'public_uid'

STEP2: Add a column for public_uid to the model

$ 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

Specify the index to public_uid in the migration file.

$ rails db:migrate

STEP3: Add code to automatically generate public_uid to the model


class Article < ApplicationRecord

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


class Article < ApplicationRecord

  def to_param


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


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

Recommended Posts

How to implement gem "summer note" in wysiwyg editor in Ruby on Rails
[Ruby on Rails] How to install Bootstrap in Rails
[Ruby on Rails] How to write enum in Japanese
[Ruby On Rails] How to reset DB in Heroku
How to implement image posting function using Active Storage in Ruby on Rails
How to use Ruby on Rails
How to display a graph in Ruby on Rails (LazyHighChart)
[Ruby on Rails] How to implement tagging / incremental search function for posts (without gem)
How to implement search functionality in Rails
[Ruby on Rails] How to use CarrierWave
[Ruby on Rails] How to use redirect_to
How to implement ranking functionality in Rails
[Ruby on Rails] How to use kaminari
[Ruby on Rails] How to display error messages
How to create a query using variables in GraphQL [Using Ruby on Rails]
How to add / remove Ruby on Rails columns
How to implement a like feature in Rails
How to debug the processing in the Ruby on Rails model only on the console
[Ruby on Rails] How to use session method
How to implement Pagination in GraphQL (for ruby)
[Ruby on Rails] How to log in with only your name and password using the gem devise
How to resolve errors that occur in the "Ruby on Rails" integration test
How to implement guest login in 5 minutes in rails portfolio
How to implement a like feature in Ajax in Rails
[Ruby on Rails] How to change the column name
(Ruby on Rails6) How to create models and tables
[Rails] How to implement scraping
[Note] About the Fizz_Buzz problem (How Ruby on Rails works)
Apply CSS to a specific View in Ruby on Rails
[Rails] How to use gem "devise"
How to deploy jQuery on Rails
How to iterate infinitely in Ruby
Try to implement Yubaba in Ruby
[Rails] How to write in Japanese
How to install Bootstrap in Ruby
Rails on Tiles (how to write)
How to introduce jQuery in Rails 6
[Rails] How to implement star rating
How to install Swiper in Rails
How to resolve OpenSSL :: SSL :: SSLError: SSL_connect on Ruby paypal-sdk-rest gem
[Ruby on Rails] Change the save destination of gem refile * Note
Erase N + 1 in acts_as_tree of tree structure Gem of Ruby on Rails
[Ruby on Rails] "|| =" ← Summary of how to use this assignment operator
[RubyOnRails] How to implement pull-down in form_with based on table data
Things to remember and concepts in the Ruby on Rails tutorial
[Ruby on Rails] How to avoid creating unnecessary routes for devise
How to implement date calculation in Java
How to change app name in rails
How to get date data in Ruby
How to use custom helpers in rails
Ruby on Rails in Visual Studio Codespaces
How to use MySQL in Rails tutorial
Deploy to Heroku [Ruby on Rails] Beginner
How to implement coding conventions in Java
Preparing to introduce jQuery to Ruby on Rails
[rails] How to configure routing in resources
[Note] How to use Rails 6 Devise + cancancan
How to implement image posting using rails
How to implement asynchronous processing in Outsystems
Beginners create portfolio in Ruby on Rails
[Ruby on Rails] Button to return to top