Skip to content

karlis-i/summernote-image-attributes

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

81 Commits
 
 
 
 

Repository files navigation

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

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

About

Summernote plugin to edit image attributes

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%