Summernote for Rails 6 using webpacker with Image title and alt attributes

summernote-with-image-attributes.md

Summernote editor for Rails 6 with webpacker and image attributes

WYSIWYG editor for website is summernote https://summernote.org

Setup

Summernote setup with webapcker, using yarn add command

yarn add [email protected]

NOTE: Don't add ^ otherwise you will get latest version. Currently only 0.8.16 works with webpacker.

Here is some issues raised by other people:

• summernote/summernote#3537

After that, you need to install tooltip, which is not working without installing it, even it is already added with bootstrap and initialized inside config/webpack/environment.js

To install poper, just type following:

yarn add @popperjs/core

Here is some issues raised by other people:

• summernote/summernote#2949
• https://stackoverflow.com/questions/60470917/tooltip-is-not-a-function-rails-6-webpack
• https://stackoverflow.com/questions/57459917/how-to-fix-this-error-module-not-found-cant-resolve-popper-js

No extra configuration required.

Require summernote in your main js file. Add following line:

...
require("summernote")
...

Import your css Style inside main style file. Add following line:

...
@import 'summernote/dist/summernote';
...

Compile Fonts:

Next, we need to compile fonts to be able correctly render icons for editor. After installing summernote with yarn command and import style, it can't find fonts which sourced inside imported style. Create new folder app/assets/fonts copy all fonts from node_modules/summernote/dist/font to app/assets/fonts.

Update config/initializers/assets.rb add this line if not added.

Rails.application.config.assets.paths << Rails.root.join('app', 'assets', 'fonts')

Add following to your main style file (this is copy from node_modules/summernote/dist/summernote.css):

@font-face {
    font-family: "summernote";
    font-style: normal;
    font-weight: 400;
    font-display: auto;
    src: url(summernote.eot);
    src: url(summernote.eot?#iefix) format("embedded-opentype"), url(summernote.woff2) format("woff2"), url(summernote.woff) format("woff"), url(summernote.ttf) format("truetype");}

Usage

Simply add id tag to text_area <%= form.text_area :content, class: 'form-control', id: "summernote" %>. Then, inside administrato.js or any other js file which will be compiled to main js file, add following:

 $(document).on("turbolinks:load",function(){
     $('#summernote').summernote();
 }

Now it should be working fine. At least it does work for me.

Image Attributes Plugin

Now you want to add image attributes, such as Title and Alt.

For that get the js file from https://github.com/asiffermann/summernote-image-title.git Thanks to @asiffermann to work on that.

• https://rawgit.com/asiffermann/summernote-image-title/master/summernote-image-title.js

Get the raw data and paste it in app/javascript/packs/summernote_image_title.js

Then require that file inside main js file and update your summernote initialization

...
require("packs/summernote_image_title")
...

$(document).on("turbolinks:load",function(){
    $('#summernote').summernote({
        imageTitle: {
          specificAltField: true,
        },
        lang: 'en-US',
        popover: {
            image: [
                ['image', ['resizeFull', 'resizeHalf', 'resizeQuarter', 'resizeNone']],
                ['float', ['floatLeft', 'floatRight', 'floatNone']],
                ['remove', ['removeMedia']],
                ['custom', ['imageTitle']],
            ],
        },
    });
});

Enjoy!