A plugin for the Summernote WYSIWYG editor.

Adds a button to the image popover to edit title, alt, class and style attributes, and Links with relevant Attributes (Thanks to minidc).

The Image Shapes, and CaptionIt addons have now been extracted to their own Plugins, you can get view them via the links further down this page.

Include the following code after including Summernote:

<script src="summernote-image-attributes.js"></script>

Currently available in English, Spanish, French, Chinese (Traditional), Italian, German and Turkish!

Finally, customize the Summernote image popover.

$(document).ready(function() {
    $('#summernote').summernote({
        popover: {
            image: [
                ['custom', ['imageAttributes']],
                ['imagesize', ['imageSize100', 'imageSize50', 'imageSize25']],
                ['float', ['floatLeft', 'floatRight', 'floatNone']],
                ['remove', ['removeMedia']]
            ],
        },
        lang: 'en-US',
        imageAttributes:{
            imageDialogLayout:'default', // default|horizontal
            icon:'<i class="note-icon-pencil"/>',
            removeEmpty:false // true = remove attributes | false = leave empty if present
        },
        displayFields:{
            imageBasic:true,  // show/hide Title, Source, Alt fields
            imageExtra:false, // show/hide Alt, Class, Style, Role fields
            linkBasic:true,   // show/hide URL and Target fields for link
            linkExtra:false   // show/hide Class, Rel, Role fields for link
        }
    });
});

• 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.

• Add links to Image
  • Thank you to minidc
  • Thank you to MarcosBL
• French Translation
  • Thank you to b-alidr
• Chinese (Traditional) Translation
  • Thank you to horkenw
• Italian Translation
  • Thank you to paolodadda
• German Translation and Horizontal Dialog Layout
  • Thank you to YaWK
• Turkish Translation
  • Thank you to GoktugOzturk