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:

• Summernote 0.8.18 / Bootstrap 3.4.1
• Summernote 0.8.18 / Bootstrap 4.6.0