summernote 删除图片时删除数据库中的图片，实现onMediaDelete回调函数

最近在做一个网站的后台管理，使用到了summernote的富文本，已经实现了图片上传的onImageUpload回调函数并成功上传和回显了图片

可以看到源代码中的base64格式的图片已经被替换了
       但是我的删除图片还没有实现，如果在编辑框中删除图片，数据库中图片并不会被删除，这样慢慢的数据库就产生了大量的数据冗余。上网查找到了一些例子，但是我都没能实现，于是我只能自己来了。
       借鉴https://blog.csdn.net/a11441555/article/details/79790465这位博主，在summernote.js中callbacks中添加了onMediaDelete，在点击图片删除时会调用这个函数，但是这个函数在官方手册中并没有介绍到，直接添加也可以被响应了，而且必须是这个函数名，其他的不行，可以认定官方已经绑定了这个函数。但是没在手册介绍使用方法，或者可能是我眼瞎了。
       然后就是实现onMediaDelete回调函数了，要传一个参数target，是当前删除的标签，即img标签，通过target[0].currentSrc获取到img标签的src属性值。把这个值传给控制器处理。

    $('#news_summernote').summernote({
        lang: 'zh-CN',
        height: 400,
        placeholder: '请在输入框编辑输入',
        spellCheck: true, //拼写检查
        callbacks: {
            onImageUpload: function (files, editor, welEditable) {
                sendFile(files[0], editor, welEditable);
            },
            onMediaDelete: function (target) {
                deleteMedia(target[0].currentSrc);//$target[0]是当前对象img标签，.currentSrc是获取img的src属性值
            },
            onPaste:function () {

            }
        }
    });
        function deleteMedia(target) {//把img的src值传回控制器
        let data = new FormData();
        data.append("src", target);
        $.ajax({
            type: "POST",
            url: "/editors/imgDelete",
            data: data,
            cache: false,
            contentType: false,
            processData: false,
            success: function () {
                alert('删除成功!');
            },
            error: function () {
                alert('删除失败!');
                return;
            }
        });
    }

       以下是控制器的代码，仅供参考。控制器得到src后取出图片的id，然后通过mybatisplus删除。

    @ResponseBody
    @PostMapping("/editors/imgDelete")
    public void editorsImgDelete(@RequestParam("src")String str){
        StringBuffer stringBuffer=new StringBuffer(str);
        int start = stringBuffer.indexOf("=");
        String id = stringBuffer.substring(start+1);
        log.info("id:{}",id);
        editorsImageUpload.removeById(Integer.parseInt(id));
    }

       到这里图片就删除成功了，但是要注意的点是：
1.控制器方法要加@ResponseBody，否则取不到前端传来的数据
2.只有点击编辑框中图片出现菜单的移除图片按钮才会触发onMediaDelete函数，想实现键盘删除和鼠标剪切图片可以在onchange回调函数中编写逻辑代码，编辑框中的内容已发生改变就会触发onchange函数，但是实现起来可能比较麻烦，有大佬实现了希望能在评论区留个链接。