本文将讲述如何在 summernote 中实现上传并插入本地图片的功能。
主要是通过设置 onImageUpload
事件回调函数来实现的:
$('#editor').summernote({
onImageUpload: function(files) {
var $editor = $(this);
// 构建一个 form 数据
var data = new FormData()
// 增加一个字段 fileup 值是待上传的文件的内容
data.append('fileup', files[0])
$.ajax({ // 上传文件到服务器端
url: '/upload',
method: 'POST',
data: data,
processData: false, // 这两个比较关键,禁止处理 form 数据
contentType: false, //
success: function(data) {
var imgURL = data.url; // 获取服务端返回的图片地址
// 插入图片
$editor.summernote('insertImage', imgURL);
};
});
}
});
Demo:
Comments