summernote 上传图片
- summernote官网的API和函数说明: https://summernote.org/deep-dive/
- summernote 默认插入图片为base64数据
- 重写onImageUpload函数
- 在复制图片和从本地上传插入图片时,函数生效。
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/389406a37dbe6d4440b3fc8b14b7de3d.png)
$('.summernote').summernote({
callbacks: {
// onImageUpload callback
onImageUpload: function(files) {
// upload image to server and create imgNode...
var data = new FormData();
data.append("file", files[0]);
$.ajax({
data : data,
type : "POST",
url : "api/article/uploadImg", //图片上传出来的url,返回的是图片上传后的路径,http格式
cache : false,
contentType : false,
processData : false,
dataType : "json",
success: function(data) {//data是返回的hash,key之类的值,key是定义的文件名
console.log(data.data);
$('.summernote').summernote('insertImage', "${urlPath}" + data.data[0],'img');
},
error:function(){
alert("上传失败");
}
});
}
}
});
summernote 删除图片
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/8a06ac12331ac32b5f285d4c6bf418dd.png)
- 修改summernote.js ,增加onMediaDelete函数
搜索callbacks,增加onMediaDelete函数名。点击移除图片按钮,触发事件。
callbacks: {
onInit: null,
onFocus: null,
onBlur: null,
onBlurCodeview: null,
onEnter: null,
onKeyup: null,
onKeydown: null,
onImageUpload: null,
onImageUploadError: null,
onMediaDelete: null,
},
- 重写onMediaDelete函数
$('.summernote').summernote({
callbacks: {
onMediaDelete: function (target) {
var imgSrc = target.context.currentSrc;
var data = new FormData();
data.append("imgSrc", imgSrc);
$.ajax({
data: data,
type: "POST",
url: "api/article/deleteImg",
cache: false,
contentType: false,
processData: false,
success: function (data) {
console.log(data);
}
});
}
}
});