Summernote - Image url instead of Base64

Question

Summernote wysiwyg editor encodes image files into Base64. Well, this seems handy but I expect the DB to be used quite heavily for a long term. This will cause some issues - searching slow, implementing image library, and etc...

I wonder if it has a option to turn this encoding option off and use 'inserting url' method intead. I've been looking for it but no great success yet.

For example, instead of storing images like...

<img style="width: 640px;" src="data:image/jpeg;base64,/9j/4Qv6RXhpZgAATU0AKgAAAAgABwESAAMAAAABAAEAAAEaAAUAAAABAAAAYgEbAAUAAAABAAAAagEoAAMAAAABAAIAAAExAAIAAAAeAAAAcgEyAAIAAAAUAAAAkIdp...............>

it should be...

<img src="/images/blah/blah.jpg.">

Any documentation? or any examples to refer?

Thanks !

Boyla

Are you copy pasting the image into the field (instead of creating an image from URL)? – Deadfall

Nope, everyone will add images using the image-insert feature of Summernote. – Boyla

Inserting an image via URL works as expected for me, it uses the URL and not a base64 string. If you want to use the upload function with normal URLs you will have to write a callback for onImageUpload – Deadfall

The users must be copying and pasting images into summernote and not using the insert image menu. Using the insert image button to insert a URL to an image results in exactly what you want, only copy-paste results in a base64 image – Orobanchaceous

I guess I should use another wysiwyg editor then... I will leave this post open so that someone who knows how or has implemented it before might leave an answer. – Boyla

Answer 1

You need to write custom function for onImageUpload().

I was looking for a solution. Found this: Summernote image upload

Urinal

Answer 2

I had this problem with some of my applications as well. I created a detailed tutorial here https://a1websitepro.com/store-image-uploads-on-server-with-summernote-not-base-64/

You have to let summernote know that you are going to process the image file with a function.

    $(document).ready(function() {
    $("#summernote").summernote({
      placeholder: 'enter directions here...',
            height: 300,
            callbacks: {
            onImageUpload : function(files, editor, welEditable) {

         for(var i = files.length - 1; i >= 0; i--) {
                 sendFile(files[i], this);
        }
    }
}
});
});

Then create another function like this for the callback.

    function sendFile(file, el) {
    var form_data = new FormData();
    form_data.append('file', file);
    $.ajax({
        data: form_data,
        type: "POST",
        url: 'editor-upload.php',
        cache: false,
        contentType: false,
        processData: false,
    success: function(url) {
    $(el).summernote('editor.insertImage', url);
   }
    });
    }

Then you will need to create a php file. To handle the request. Notice the php file for this script is named editor-upload.php

Nirvana

Answer 3

You can see the custom code I wrote for Summernote in this project. It allows you to upload images without using BASE64. I also enhanced the text editor with multilingual support, so you can update text and images independently without them interfering with each other.

You can see here:

https://github.com/hsmyv/laravel-text-editor-with-image

Shadowy