summernote 上传图片、删除图片

summernote 上传图片

  1. summernote官网的API和函数说明: https://summernote.org/deep-dive/
  2. summernote 默认插入图片为base64数据
  3. 重写onImageUpload函数
  4. 在复制图片和从本地上传插入图片时,函数生效。
    在这里插入图片描述
 $('.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 删除图片

在这里插入图片描述

  1. 修改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,
        },
  1. 重写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);
                }
            });
        }
    }
});
  • 2
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值