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: