summernote 上传图片、删除图片

最新推荐文章于 2025-03-08 12:11:34 发布

sincy09

最新推荐文章于 2025-03-08 12:11:34 发布

阅读量4.6k

点赞数 2

分类专栏：前端文章标签： summernote

本文链接：https://blog.youkuaiyun.com/sincy09/article/details/82853547

版权

前端专栏收录该内容

2 篇文章

订阅专栏

summernote 上传图片

summernote官网的API和函数说明： https://summernote.org/deep-dive/
summernote 默认插入图片为base64数据
重写onImageUpload函数
在复制图片和从本地上传插入图片时，函数生效。

 $('.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 删除图片

在这里插入图片描述

修改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);
                }
            });
        }
    }
});