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

summernote的基本使用

HTML代码

//div添加个id就可以  
<div id="summernote" ></div>

然后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 
//自己记得添加判断类型,文件大小等等判断语句,我这是调试的代码
if($_SERVER['REQUEST_METHOD']==='POST'){
		$image=$_FILES['file'];
		 $tmp_name=$image['tmp_name'];
         $new_name=$image['name'];
		 $save_name='../uploads/'.$new_name;
		 $move=move_uploaded_file($tmp_name, $save);
           //关于路径,自己要根据当前项目自己判断,储存路径和返回页面引用的路径
		 if($move){
		 	//上传成功返回图片路径
		 	echo $save_name;
		 }else{
		 	echo '上传失败';
		 }
	}
 ?>

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

<?php 
if($_SERVER['REQUEST_METHOD']==='POST'){
	if(empty($_POST['imgSrc'])){
		echo '没有找到文件';
	}else{
		$imgurl=$_POST['imgSrc'];
		$ruselt=unlink($imgurl);
       //注意自己文件的路径
		if($ruselt){
			echo '删除成功';
		}else{
			echo '删除失败';
		}
	}
}
 ?>

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