Good to know: Summernote is HTML text editor which is lightweight and easy to uses.

In our experience, it seem like Summernote is the best choice if you are the one who are web developer and looking for HTML text editor, WYSIWYG editor.

However, nothing completely perfect. We have faced a problem of Summernote insert image in content, and we think many people are the same. The problem is method which Summernote use to insert images in content.

Background

As the normal tool to insert images in content which Summernote provided, it can call to show by modify your javascript, like this…

$('.textEditor').summernote({
 lang: 'en-EN',
 dialogsInBody: true,
 height: 120,
 minHeight: null, 
 maxHeight: null, 
 shortCuts: false,
 fontSize: 14,
 disableDragAndDrop: false,
 toolbar: [
 ['style', ['bold', 'italic', 'underline', 'clear']],
 ['font', ['strikethrough', 'superscript', 'subscript']],
 ['fontsize', ['fontsize']],
 ['color', ['color']],
 ['para', ['ul', 'ol', 'paragraph']],
 ['height', ['height']],
 ['Insert', ['picture']],
 ['Other', ['fullscreen', 'codeview']]
 ]
 });

And you will see the icon to insert image in content.

If you try to use this for inserting. Browse image on your local and upload. After that, do you know what happen ?

Summernote will convert your image into characters by encode using base64 algorithm. The length of character after encoded are too many size, 7,000 characters for image size 5 KB by estimation.

This is the normally method that Summernote uses.

<p><img style="width: 978px;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABA... 

Whereas we found that almost hosting have some limitation when we submit the data at front-end. In this case, absolutely, the hosting not allow to submit the text character which too big size (not included other fields in the form).

Solution

Yes ! we should to find the new way that could be possible. So, we will present you how to apply currently method and replace by the new which we think it works.

We are coming to the most important part in this article : Best Solution for “Summernote insert image in content

1. Use Callbacks function

$('.textEditor').summernote({
 lang: 'en-EN',
 dialogsInBody: true,
 height: 120,
 minHeight: null, 
 maxHeight: null, 
 shortCuts: false,
 fontSize: 14,
 disableDragAndDrop: false,
 toolbar: [
 ['style', ['bold', 'italic', 'underline', 'clear']],
 ['font', ['strikethrough', 'superscript', 'subscript']],
 ['fontsize', ['fontsize']],
 ['color', ['color']],
 ['para', ['ul', 'ol', 'paragraph']],
 ['height', ['height']],
 ['Insert', ['picture']],
 ['Other', ['fullscreen', 'codeview']]
 ],
 callbacks: {
 onImageUpload: function(image) {
 editor = $(this);
 uploadImageContent(image[0], editor);
 }
 }
 });

Add Callbacks function inside your current Summernote and define function for Callbacks. Refer to example sourcecode above, we define function name “uploadImageContent()” as a function caller.

2. Coding on JQuery technique to upload image onto hosting as a core function following as:

function uploadImageContent(image, editor) {
 var data = new FormData();
 data.append("image", image);
 $.ajax({
 url: "your path of server side 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) {
 console.log(data);
 }
 });
 }

The url value must has a value of your path of server side script to upload an image ex. “action/uploadImage.php” if you use php.

3. Coding on your server side script. For our example, we use PHP for server side script.

<?php
$return_value = "";
if ($_FILES['image']['name']) {
 if (!$_FILES['image']['error']) {
 $name = md5(rand(100, 200));
 $ext = explode('.', $_FILES['image']['name']);
 $filename = $name . '.' . $ext[1];
 $destination = 'your server path for destination of uploaded image' . $filename;
 $location = $_FILES["image"]["tmp_name"];
 move_uploaded_file($location, $destination);
 $return_value = 'your server path for uploaded image to show as HTML' . $filename;
 }else{
 $return_value = 'Ooops! Your upload triggered the following error: '.$_FILES['image']['error'];
 }
}
echo $return_value;
?>

Then this way will upload your local images onto hosting instead of encode to many large of character.

Feel free to leave your questions.

I think our topic Best solution for “Summernote insert image in content” will be useful.

Have fun 🙂

4 Give us some moral support.
(Visited 1,810 times, 3 visits today)

16 Comments

  1. d_halupong January 9, 2018 at 12:02 PM

    It’s work. Thanks mate.

    Reply
  2. Pattrick J January 15, 2018 at 9:38 PM

    Thanks. This help my site to have a HTML editor.

    Reply
  3. Marks October 24, 2018 at 8:06 PM

    Hey, thanks for this tutorial!

    With your code almost everything goes right (and that’s already more than I’ve ever obtained before with other tutorials):
    1) the local file selection window does open;
    2) the selected local file gets uploaded on ftp in the right folder with the right name;
    3) the img node is correctly inserted in the html of the summernote textarea, with the correct src.

    Except… it does not show in the summernote textarea (broken img icon).
    And not only that: if I point the browser to the image file (which, I state it again, it’s there on ftp before my eyes, I can also download and open it with any image app!), it returns to me a nice 404.

    After literally going nuts trying to understand WHY can’t I get that image to show, I went to error_log and sow this, corresponding to the act of showing the img in summernote:

    “mod_include: Options +Includes (or IncludesNoExec) wasn’t set, INCLUDES filter removed: /404.shtml, referer: (…my script folder’s path…)”

    I don’t know a thing about server configuration, and I don’t know if any of you can help me, but maybe the problem is related to this error.

    Any idea?
    Ah, almost forgot: the folder into which the image file is uploaded has all the permissions it needs. Just in case.

    Reply
  4. VatsalGor March 4, 2019 at 1:56 PM

    My data attribute doesn’t have any value when i log it in the console after appending the file. What can be the problem?

    Reply
  5. Jairo July 24, 2019 at 11:03 PM

    I get this:

    [Deprecation] Resource requests whose URLs contained both removed whitespace (`\n`, `\r`, `\t`) characters and less-than characters (`<`) are blocked. Please remove newlines and encode less-than characters from places like element attribute values in order to load these resources. See https://www.chromestatus.com/feature/5735596811091968 for more details

    Reply
  6. Ryan October 17, 2019 at 3:00 AM

    It went about as smoothly as any tutorial / example I have used. It works exactly correctly for me. Hopefully, the random md5 hash will not duplicate as a filename. I can always pass a id value to fix that.

    Reply
  7. huseyin April 8, 2020 at 9:31 PM

    ıt works thanx, but, what about delete image?

    Reply
  8. Neeraj Kumar May 14, 2020 at 10:57 PM

    Great! Thank you so much!

    Reply
  9. Lord dubbs June 8, 2020 at 10:47 PM

    What version of summernote ?

    Reply
  10. S. Baskoy June 29, 2020 at 3:23 PM

    Can you explain to me that. How can we see uploaded files on the server folder and send to editor when selected anyone from modal page?

    Reply
  11. trevor July 2, 2020 at 11:15 AM

    Pretty slick dude.

    Reply
  12. Sairam July 21, 2020 at 8:48 AM

    Error while inserting dataYou have an error in your SQL syntax; check the manual that corresponds to your MariaDB server version for the right syntax to use near ‘C:\xampp\tmp\phpE920.tmp’ to ‘./uploads/1d7f7abc18fcb43975065399b0d1e48e.jpg’ in’ at line 1

    i got error like this please help me

    Reply
    1. admin February 22, 2021 at 3:13 PM

      Please let me know your status now, or show me your SQL that the system said that your SQL syntax errors.

      Reply
  13. Mauphung August 23, 2020 at 8:36 PM

    Is there any complete code example for trial to download?
    Thanks

    Reply
  14. gay0day January 27, 2021 at 1:06 AM

    Can I just say what a relief to find somebody that really knows what they’re talking about on the net.

    You definitely know how to bring a problem to light and make it
    important. More people need to check this out and understand this side
    of the story. I was surprised that you are not more popular since you
    surely have the gift.

    Reply
  15. Sanoop P S June 6, 2021 at 4:32 PM

    I cant use this code to insert image size 1 MB

    Reply

Leave A Comment

Your email address will not be published.