Summernote 0.8.12 Image Upload And Delete

Question

In Summernote 0.8.12 version, I couldn't find a code to upload and delete Images. Can you help me?

Answer 1

To do this you need to use a call back to a function which will handle your upload - in my case I have below for my summernote (very simplified for relevance):

    $('.editor').summernote({
        toolbar: [
            ['insert', ['link', 'picture']]
        ],
        callbacks: {
            onImageUpload: function(image) {
                uploadSNImage(image[0]);
            },
            onMediaDelete : function(target) {
                deleteSNImage(target[0].src);
            }
        }
    });

The callback says that when an image is uploaded it calls the function called uploadSNImage.

This function looks like:

    function uploadSNImage(image, editor) {
        var data = new FormData();
        data.append("image", image);
        $.ajax({
            url: 'YOUR UPLOAD SCRIPT',
            cache: false,
            contentType: false,
            processData: false,
            data: data,
            type: "post",
            success: function(url) {
                var image = $('<img>').attr('src', url);
                editor.summernote("insertNode", image[0]);
            },
            error: function(data) {
            }
        });
    }

You will need to change url to the url on your server which will take the image and validate it, store it somewhere and so on but this will physically allow the image to be passed to that script.

The output from that script should be url to the file you have uploaded so you can then use that in the success part of the function.

To delete works in a similar way except this time you use onMediaDelete in the callback - again this invokes a function with an ajax call to a script to delete the image (edited to include this above).

Your delete function then looks something like:

function deleteSNImage(src) {
    $.ajax({
        data: {src : src},
        type: "POST",
        url: "YOUR DELETE SCRIPT", 
        cache: false,
        success: function(data) {
            alert(data);
        }
    });
}