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

编程问答 2022-04-24

问题描述

我在 Python Flask 应用程序中使用的是 Summer note 0.8.18 版本。

已包含以下库

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

并调用summer note方法如下

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，您应该看到的行为是 <input id="inpKey" type="text"> <input id="inpValue" type="text"> <button type="button" id="add">Add</button> <div id="items"></div> 不存在。

因为您没有意识到您必须在您之后的某个时刻加载 jQuery（尽管您未能将其包含在您共享的代码中）：

  1. 加载 jQuery slim
  2. 加载了 summernote 插件并将其附加到 jQuery slim 实例
  3. 被称为$.ajax

通过稍后加载 jQuery，您已经将附加了 Summernote 的 $('#summernote').summernote 版本替换为附加了 $ 的另一个版本。

  • 加载一个且仅一个版本的 jQuery 一次且仅加载一次
    • 使其成为当前版本 (3.6.0) 而不是您当前使用的过时版本（2.1.4 或 3.4.1）
  • 在加载summernote之前加载它
  • 如果你需要ajax方法，不要使用slim版本
ajaxjavascriptjquerywysiwyg