Awesome

summernote-image-title

A plugin for the Summernote WYSIWYG editor.

Adds a button to the image popover to edit title and alt attributes.

Installation

1. Include JS

This plugin is available on NPM or Bower:

npm install summernote-image-title --save

bower install summernote-image-title --save

Include the following code after Summernote:

<script src="summernote-image-title.js"></script>

2. Supported languages

Currently available in:

English
French
Korean (thanks to @lqez and @pincoin)
Portuguese (thanks to @parg-programador)
Spanish (thanks to Cristian from Websfrits.com)
Català (thanks to Cristian from Websfrits.com)
German (thanks to @osworx)
Russian (thanks to @anton-z)
Dutch (thanks to MysticEarth)
Thai (thanks to @pincoin)
Japanese (thanks to @cmonos)
Traditional Chinese (thanks to @SuYiLun41)
Arabic (thanks to @abdulrahman19)
Persian (thanks to @kiaksarg)
Romanian (thanks to @totpero)
Turkish (thanks to @beratkara)

Contributions are welcomed!

3. Summernote options

Finally, customize the Summernote image popover. You can choose if you want to edit the alt attribute specifically or not with the option specificAltField:

$(document).ready(function() {
    $('#summernote').summernote({
        imageTitle: {
          specificAltField: true,
        },
        lang: 'fr-FR',
        popover: {
            image: [
                ['image', ['resizeFull', 'resizeHalf', 'resizeQuarter', 'resizeNone']],
                ['float', ['floatLeft', 'floatRight', 'floatNone']],
                ['remove', ['removeMedia']],
                ['custom', ['imageTitle']],
            ],
        },
    });
});

Example

You can see working pens here: