Summernote Image Attributes

If you want to add image attributes in summernote then please follow the steps–

Step 1: load summernote js
http://<script src=”https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js”></script>

Step 2 : load summernote attribute js
http://codersqube.in/wp-content/uploads/2024/01/summernote-image-attributes.js

Step 3:

<textarea class="form-control summernote12" name="description" id="description1" required ></textarea>

Step 4: Add this js

$('#description1').summernote({
        popover: {
            image: [
                ['custom', ['imageAttributes']],
                ['imagesize', ['imageSize100', 'imageSize50', 'imageSize25']],
                ['float', ['floatLeft', 'floatRight', 'floatNone']],
                ['remove', ['removeMedia']]
            ],
        },
        lang: 'en-US', // Change to your chosen language
        imageAttributes:{
            icon:'<i class="note-icon-pencil"/>',
            removeEmpty:false, // true = remove attributes | false = leave empty if present
            disableUpload: false // true = don't display Upload Options | Display Upload Options
        }
    });

Leave a Reply