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)

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: [
                ['imagesize', ['imageSize100', 'imageSize50', 'imageSize25']],
                ['float', ['floatLeft', 'floatRight', 'floatNone']],
                ['remove', ['removeMedia']],
                ['custom', ['imageTitle']],
            ],
        },
    });
});

Example

You can see a working example here.