/summernote-image-attributes

Summernote plugin to edit image attributes

Primary LanguageJavaScript

summernote-image-attributes

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.

Installation

1. Include JS

Include the following code after including Summernote:

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

2. Supported languages

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

3. Summernote options

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
        }
    });
});

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.

Contributors

  • Add links to Image
  • French Translation
  • Chinese (Traditional) Translation
  • Italian Translation
  • German Translation and Horizontal Dialog Layout
  • Turkish Translation