Summernote - 从服务器删除图像

Hi I have used the code from the following link to allow images to be uploaded to the server. Summernote image upload

Would it be possible to implement something similar to remove an image from the server if a user deletes it from the editor? If so, how can I go about achieving this?

I guess you solved the problem by now but as I have been looking for the same answer and finally managed to make it work here is my approach:

First I get all the img src in summernote's textarea then I read all the img files in the folder on the server. After that, I unlink the files in the folder which are not in summernote's img src array.

        $dom = new domDocument;
        $dom->loadHTML(html_entity_decode($content));
        $dom->preserveWhiteSpace = false;
        $imgs  = $dom->getElementsByTagName("img");
        $links = array();
        $path = '../content/'.$id.'/';
        $files = glob($path . "*.*");
        for($i = 0; $i < $imgs->length; $i++) {
           $links[] = $imgs->item($i)->getAttribute("src");
        }
        $result=array_diff($files, $links);
           foreach($result as $deleteFile) {
               if (file_exists($deleteFile)) {
                 array_map('unlink', glob($deleteFile));
               }
           }
       } 

Hope this will help others.

EDIT to answer to @eachone: You can use AJAX too (I do it with jQuery).

$('#DivContainingSummernoteTextarea').blur(function(){
$contentPost = $("#SummernoteTextarea").code();
doAjax('something');
});

I store the content of summernote's textarea in $contentPost. Then doAjax will call the PHP and POST $content. If the img on the server is not in $content it will be deleted.

If we can catch an event for user's deleting image action on the client side, we can make a ajax call for delete image. but I don't know whether it is or not. I also looking for a solution.

To Delete file form Server, you need to use onMediaDelete but usage varies with different summernote versions, sometimes difficult to find in the docs.

FOR SUMMERNOTE 0.6.x

$(document).ready(function() {
    $('.summernote').summernote({
        height: "300px",
         onMediaDelete : function($target, editor, $editable) {
         alert($target.context.dataset.filename);         
         $target.remove();
    }
    });
});

FOR SUMMERNOTE 0.7.x

$(document).ready(function() {
    $('.summernote').summernote({
        height: "300px",
        onMediaDelete : function(target) {
                deleteFile(target[0].src);
            }

    });
});

FOR SUMMERNOTE 0.8.x (Use Callbacks)

$(document).ready(function() {
    $('#summernote').summernote({
        height: "300px",
        callbacks: {
            onImageUpload: function(files) {
                uploadFile(files[0]);
            },

            onMediaDelete : function(target) {
                // alert(target[0].src) 
                deleteFile(target[0].src);
            }
        }
    });
});

Javascript : Sample to Delete File using img src

function deleteFile(src) {

    $.ajax({
        data: {src : src},
        type: "POST",
        url: base_url+"dropzone/delete_file", // replace with your url
        cache: false,
        success: function(resp) {
            console.log(resp);
        }
    });
}

PHP: Sample to Delete Image afeter retrieving img src

<?php
  $src = $this->input->post('src'); // $src = $_POST['src'];
  $file_name = str_replace(base_url(), '', $src); // striping host to get relative path
        if(unlink($file_name))
        {
            echo 'File Delete Successfully';
        }
?>

This is what I used, its just that, the delete event is not triggered on keypress like backspace, perhaps a keyEvent will handle that in future.