Summernote plugin to edit image attributes
Switch branches/tags
Nothing to show
Clone or download
Pull request Compare This branch is 90 commits behind DiemenDesign:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
README.md
summernote-image-attributes-dialog.png
summernote-image-attributes-popover.png
summernote-image-attributes.js

README.md

summernote-image-attributes

A plugin for the Summernote WYSIWYG editor.

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

It also optionally adds a dropdown to choose from Bootstrap image shapes (Thanks to MarcosBL).

summernote-image-attributes-popover

summernote-image-attributes-modal

Installation

1. Include JS

Include the following code after Summernote:

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

2. Supported languages

Currently available in English and Spanish!

3. Summernote options

Finally, customize the Summernote image popover.

$(document).ready(function() {
    $('#summernote').summernote({
        popover: {
            image: [
                ['imagesize', ['imageSize100', 'imageSize50', 'imageSize25']],
                ['float', ['floatLeft', 'floatRight', 'floatNone']],
                ['custom', ['imageAttributes', 'imageShape']],
                ['remove', ['removeMedia']]
            ],
        },
        lang: 'en-US'
/* Do NOT set the below options when Calling Summernote, we're working on why these are throwing an error that causes the plugin not to work.
        imageAttributes:{
            icon:'<i class="note-icon-pencil"/>',
            removeEmpty:false // true = remove attributes | false = leave empty if present
        },
        imageShape: {
            icon: '<i class="note-icon-picture"/>'
        }
*/
    });
});

Contributors