summernote-image-captionit

Adds a button 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.</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:{
            icon:'<i class="note-icon-{your-icon}"/>', // Leave empty or don't set for default Icon.
            figureClass:'{figure-class/es}',
            figcaptionClass:'{figcapture-class/es}',
        }
    });
});

4. Check out our other Summernote Plugins

• Summernote Image Attributes
  • Add Button to Image Popup to enable editing various Image Attributes, including adding Links.
• Summernote Image Caption It
  • Add Button to Image Popup to add FigCaption and Figure Elements using the TITLE or ALT Text.
• Summernote Image Shapes
  • Add Button to Image Popup to enable selecting Bootstrap Image Shapes.
• Summernote Video Attributes
  • Insert Video's from various Streaming Services, with Options Editing.
• Summernote Cleaner
  • Clean Pasted and Existing Markup, mainly for cleaning text from Office Document software.
• Summernote Save Button
  • Add a Save Button to the Toolbar when Summernote is inside a form with a Textarea to easily save your document.
• Summernote SEO
  • Adds a Dropdown to the Toolbar that allows extracting selected text and inserts it into input elements for editing.