javascript - Summer Note (WYSIWYG) - 图像上传为文件问题
问题描述
我在我的 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>
并调用如下夏季笔记方法
<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)
谁能帮我解决这个问题?
谢谢
解决方案
由于您加载了 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版本
推荐阅读
- reactjs - 如何修复此 axios 调用
- ios - 不同屏幕尺寸的标签系列自动布局?
- ssl - 专用网络上的加密流量
- assembly - 编写一个从 1 加到 100 的汇编程序
- python-3.x - 程序从 python3 中的 subprocess.run() 运行,无法创建文件
- bitbucket-pipelines - bitbucket-pipelines.yml 应该与开发和主分支一起推送到哪里?
- javascript - 如何简化嵌套条件?
- python - 如何将 sys.argv 列表元素从字符串更改为整数?
- java - 如何在 Android 10 (API 29) 上更新 mediastore 中的专辑封面?
- reactjs - Firestore 和缓存问题?(反应)