summernote-image-attribute-editor

A plugin for the Summernote WYSIWYG editor.

Adds a button to the image popover to edit title, alt, caption and resize along with managing of Aspect Ratio.

1. Installation

• Include JS

  Include the following code after Summernote:

  <script src="summernote-image-attributes.js"></script>
  <script src="lang/[language-COUNTRY].js"></script>
  			

• Using npm

  If you are using npm, run this command

  npm i summernote-image-attributes-editor --save

2. Supported languages

Currently available in:

• English

Contributions are welcomed!

3. Summernote options

Finally, customize the Summernote image popover.

$(document).ready(function() {
				  $('#summernote').summernote({
					  imageAttributes: {
							icon: '<i class="note-icon-pencil"/>',
						  figureClass: 'figureClass',
						  figcaptionClass: 'captionClass',
						  captionText: 'Caption Goes Here.',
						  manageAspectRatio: true // true = Lock the Image Width/Height, Default to true
					  },
					  lang: 'en-US',
					  popover: {
						  image: [
							  ['imagesize', ['imageSize100', 'imageSize50', 'imageSize25']],
							  ['float', ['floatLeft', 'floatRight', 'floatNone']],
							  ['remove', ['removeMedia']],
							  ['custom', ['imageAttributes']],
						  ],
					  },
				  });
			  });