我的目标是将上传的图像（本地文件）插入到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>你可以尝试设置'text/html' mode
注意：在editor回调中没有welEditable，onImageUpload params
$(document).ready(function() {
$('.summernote').summernote({
height: 300,
focus: true,
codemirror: {
mode: 'text/html',
}
});
});<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>更新在ajax成功，您可以插入图像
// getting old html
let html = $('.summernote').summernote('code');
// setting updated html with image url
$('.summernote').summernote('code', html + '<img src="' + url + '"/>');
在ajax成功之后，我们可以通过这种方式将图像插入到编辑器实例中
success: function(url) {
$('#summernote').summernote("insertImage", url, 'filename');
},
不需要从editor函数参数插入sendFile(file, editor, welEditable)。对于我的情况，这解决了问题。
有用的comment