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 '刪除失敗';
		}
	}
}
 ?>

刪除的時候是點選一下圖片，圖片會顯示一個刪除按鈕，只有點選這個按鈕才會觸發刪除事件，用鍵盤直接刪除只能刪除編輯器內的圖片，伺服器的圖片沒有刪除