summernote富文本编辑器实现图片添加上传和删除图片

summernote的基本使用

HTML代码

//div添加个id就可以  

然后JS操作

//实例化调用
var $summernote = $('#summernote').summernote({
	    height: 300,
	    minHeight: 200,
	    maxHeight: 400,
	    focus: true,
	    callbacks: {
            //上传时调用
	        onImageUpload: function (files) {
	             uploadFile($summernote, files[0]);
	        },
            //删除时调用
	        onMediaDelete: function (target) {
	           removeFile(target);
	        }
	    }
    })
	//上传图片
	 function uploadFile($summernote, file) {
	    var fd = new FormData();
	    fd.append("file", file);
	    $.ajax({
	        url:"page/upload_img.php",
	        data: fd,
	        cache: false,
	        contentType: false,
	        processData: false,
	        type: 'POST',
	        success: function (data) {
	            $summernote.summernote('insertImage', data,'img');
	        }
	    });
	}
	//删除图片
	function removeFile(target){
		var imgsrc = target[0].currentSrc;
        $.post('page/remove_img.php',{
        	imgSrc:imgsrc
        },function(data){
        	console.log(data);
        })
        
	}

PHP文件upload_img.php接收并储存到文件夹;

PHP文件remove_img.php：客户端点击删除时服务器端删除储存的图片

删除的时候是点击一下图片，图片会显示一个删除按钮，只有点击这个按钮才会触发删除事件，用键盘直接删除只能删除编辑器内的图片，服务器的图片没有删除