我的目标是将上传的图片(本地文件)插入到 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'模式
注意 onImageUpload 中没有editor, welEditable 参数回调
$(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 + '"/>');
关于javascript - 将上传的图片插入到 summernote 编辑器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55496158/