本文编写于 1402 天前,最后修改于 1289 天前,其中某些信息可能已经过时。
Summernote上传图片至SMMS图床Api
SummerNote是一款WYSIWYG(what you see is what you get)富文本编辑器,支持Bootstrap4,中文本地化,支持图片上传,本篇教程教你如何让编辑器默认上传图片到smms图床

官网查看
放个链接,官网上基本啥都有
引入 summernote

在HTML头部引入CDN加速的 js文件,这里我修改成了国内CDN镜像,并且用的是Boostrap4样式的编辑器
<link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<!-- summernote for bs4 -->
<link href="https://cdn.bootcss.com/summernote/0.8.12/summernote-bs4.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/summernote/0.8.12/summernote-bs4.min.js"></script>
<script src="https://cdn.bootcss.com/summernote/0.8.12/lang/summernote-zh-CN.min.js"></script>
在需要添加富文本编辑器的地方输入,或者用div包裹也可以
<textarea id="summernote"></textarea>
初始化并自定义上传到SMMS图床
$(document).ready(function() {
$('#summernote').summernote({
placeholder: '在此处输入您的维修建议,可加入图片',
tabsize: 2,
height: 150,
lang: 'zh-CN', // default: 'en-US'
//调用图片上传
callbacks: {
//图片上传
onImageUpload: function(files, editor, $editable) {
sendFile(files[0], editor, $editable);
},
//图片删除
onMediaDelete: function(target) {
console.log(target[0].attributes.hash.value)
deleteFile(target[0].attributes
.hash.value);
}
}
});
//上传图片
function sendFile(file, editor, $editable) {
var formdata = new FormData();
var fileName = file['name'];
formdata.append("smfile", file);
$.ajax({
//图片上传出来的url,返回的是图片上传后的路径,http格式
url: "https://sm.ms/api/v2/upload",
type: "POST",
data: formdata,
cache: false,
contentType: false,
processData: false,
dataType: "json",
success: function(res) {
//url:图片路径 filename:图片名称
$('#summernote').summernote('insertImage', res.data.url, function(
$image) {
$image.css('width', $image.width() / 3);
$image.attr('hash', res.data.hash);
$image.attr('data-filename', res.data.filename);
});
},
error: function() {
alert("上传失败");
}
});
};
function deleteFile(src) {
$.ajax({
type: "GET",
url: "https://sm.ms/api/v2/delete/" + src,
cache: false,
success: function(res) {
alert("删除成功")
console.log(res)
}
});
}
});
然后就可以实现点击上传图片上传到smms图床,并且点击图片删除的时候图床也删除,不会使用自带的base64产生大量长字符了,方便储存,也方便读取
存在的缺陷
没有用smms的V2图床进行鉴权操作,因为我搞不明白,一加auth就报错无法上传,那就算了