Summer Note (WYSIWYG) - 图像上传为文件问题

Posted 2023-03-22

【中文标题】Summer Note (WYSIWYG) - 图像上传为文件问题

【英文标题】：Summer Note (WYSIWYG) - Image upload as a file issue

【发布时间】：2021-08-28 07:13:10

【问题描述】：

我在我的 Python 烧瓶应用中使用 Summer Note 0.8.18 版本。

已包含以下这些库

<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>

如下调用summer note方法

    <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>

除了我尝试将图像上传为文件时，一切正常。每次上传图片时都会出现以下错误

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)

谁能帮我解决这个问题？

谢谢

【参考方案1】：

由于您加载的是 jQuery slim 而不是 jQuery，因此您应该看到的行为是 $.ajax 不存在。

由于您没有得到，您必须在之后的某个时间加载 jQuery（尽管您未能将其包含在您共享的代码中）：

已加载 jQuery slim 加载了 summernote 插件并将其附加到该 jQuery slim 实例 致电$('#summernote').summernote

通过稍后加载 jQuery，您已将附加了 summernote 的 $ 版本替换为附加了 ajax 的另一个版本。

---

加载一个且

仅一个

版本的jQuery一次且

仅一次

将其设为当前版本 (3.6.0)，

不是

您当前使用的过时版本（2.1.4 或 3.4.1） 在加载summernote之前先加载它 如果需要ajax方法，不要使用slim版本