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就报错无法上传，那就算了