Awesome
summernote-image-captionit
Adds a button to the Image Popover that will use the TITLE or ALT depending which is used, places that text into a figcaption and wraps the img and figcaption within a figure element, ala HTML5 like:
<figure class="{inserted class from option}">
<img src="image.jpg" title="uses this first" alt="uses this if title is empty">
<figcaption class="{inserted class from option}">caption used from title or alt if title is empty or the default text in the captionTitle option.</figcaption>
</figure>
Installation
1. Include JS
Include the following code after including Summernote:
<script src="summernote-image-captionit.js"></script>
2. Supported languages
Currently available in English!
3. Summernote options
Finally, customize the Summernote image popover.
$(document).ready(function() {
$('#summernote').summernote({
popover: {
image: [
['custom', ['captionIt']],
['imagesize', ['imageSize100', 'imageSize50', 'imageSize25']],
['float', ['floatLeft', 'floatRight', 'floatNone']],
['remove', ['removeMedia']]
],
},
captionIt:{
figureClass:'{figure-class/es}',
figcaptionClass:'{figcapture-class/es}',
captionText:'{Default Caption Editable Placeholder Text if Title or Alt are empty}'
}
});
});