我的目标是将上传的图像(本地文件)插入到summernote编辑器中。
图像上传成功,只需要插入到编辑器中即可。
我试图在控制台记录编辑器实例,但它显示为未定义。 如果我可以将编辑器实例传递给sendFile
函数,我认为问题将得到解决。
$(document).ready(function () {
$('.summernote').summernote({
callbacks: {
onImageUpload: function(files, editor, welEditable) {
var url= sendFile(files[0], editor, welEditable);
}
},
height: 300,
focus: true,
});
function sendFile(file, editor, welEditable) {
data = new FormData();
data.append("file", file);
console.log(editor);
/* $.ajax({
data: data,
type: "POST",
url: "Test/test",
cache: false,
contentType: false,
processData: false,
success: function(url) {
editor.insertImage(welEditable, url);
console.log(url); //eg:https://server-url/assets/images/a8f15ed.jpg
},
error: function(jqXHR, stat, err){
console.log(stat+':'+err);
}
}); */
}
});
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote-bs4.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote-bs4.js"></script>
</head>
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="col-md-4">
<div class="summernote"></div>
</div>
</div>
</div>
</div>