Summer Note (WYSIWYG) - Image upload as a file issue

Question

I am using summer note 0.8.18 version in my Python flask app.

Have included these below libraries

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js"></script>

And calling summer note method as below

    <script>
      $('#summernote').summernote({
        placeholder: 'About Us',
        tabsize: 2,
        height: 120,
        callbacks: {
                onImageUpload: function(image) {
                    uploadImage(image[0]);
                }
        },
        toolbar: [
          ['style', ['style']],
          ['font', ['bold', 'underline', 'clear']],
          ['color', ['color']],
          ['para', ['ul', 'ol', 'paragraph']],
          ['table', ['table']],
          ['insert', ['link', 'picture', 'video']],
          ['view', ['fullscreen', 'codeview', 'help']]
        ]
      });

      function uploadImage(image) {
           var data = new FormData();
           data.append("image", image);
           $.ajax({
               url: "/submitwysiwyg/imageupload",
               cache: false,
               contentType: false,
               processData: false,
               data: data,
               type: "POST",
               success: function(filename) {
                   var image = $('<img>').attr('src', filename).addClass("img-fluid");
                   $('#summernote').summernote("insertNode", image[0]);
               },
               error: function(data) {
                   console.log(data);
               }
           });
       }
    </script>

Everything works except when I try to upload an image as file. I get below error whenever I upload an image

Uncaught TypeError: $(...).summernote is not a function
    at Object.success (aboutus?edit=yes:185)
    at j (jquery-2.1.4.min.js:2)
    at Object.fireWith [as resolveWith] (jquery-2.1.4.min.js:2)
    at x (jquery-2.1.4.min.js:4)
    at XMLHttpRequest.<anonymous> (jquery-2.1.4.min.js:4)

Can anyone help me fix this issue?

Thank you

Answer 1

Since you loaded jQuery slim instead of jQuery the behaviour you should see is that $.ajax doesn't exist.

Since you aren't getting that you must be loading jQuery (although you failed to include that in the code you shared) at some point after you:

1. Loaded jQuery slim
2. Loaded the summernote plugin and attached it to that instance of jQuery slim
3. Called $('#summernote').summernote

By loading jQuery later you have replaced the version of $ that has summernote attached to it with a different one that has ajax attached to it.

---

• Load one and only one version of jQuery once and only once
  • Make it the current version (3.6.0) and not the out of date versions you are currently using (2.1.4 or 3.4.1)
• Load it before you load summernote
• Don't use the slim version if you need the ajax method