Summernote - 从服务器中删除图像答案

【问题标题】：Summernote - Delete image from serverSummernote - 从服务器中删除图像
【发布时间】：2015-03-20 14:50:19
【问题描述】：

您好，我已使用以下链接中的代码将图像上传到服务器。 Summernote image upload

如果用户从编辑器中删除图像，是否可以实现类似于从服务器中删除图像的操作？如果是这样，我该如何实现这一目标？

【问题讨论】：

【解决方案1】：

要从服务器中删除文件，您需要使用onMediaDelete，但用法因summernote 版本不同而异，有时在文档中很难找到。

SUMMERNOTE 0.6.x

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

对于 SUMMERNOTE 0.7.x

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

    });
});

SUMMERNOTE 0.8.x（使用回调）

$(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 : 使用 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：在检索 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';
        }
?>

这是我使用的，只是删除事件不会像退格键那样在按键上触发，也许将来会有一个 keyEvent 处理。

【讨论】：

不错的解决方案但是，如果有人仅使用退格键删除图像会发生什么？，似乎回调没有触发......
@4Jean，我知道已经有一段时间了，但它仍然无法在我的网站上运行。我用的是summernote-bs4.min.js，直接从Summernote官网下载。你能告诉我你当时使用的是哪个版本吗？谢谢。

【解决方案2】：

我猜你现在已经解决了这个问题，但是我一直在寻找相同的答案并最终设法让它在这里工作，这是我的方法：

首先我得到了summernote的textarea中的所有img src，然后我读取了服务器上文件夹中的所有img文件。之后，我unlink文件夹中不在summernote的img src数组中的文件。

        $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));
               }
           }
       }

希望这对其他人有所帮助。

编辑回答@eachone：你也可以使用 AJAX（我用 jQuery 来做）。

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

我将summernote的textarea的内容存储在$contentPost中。然后doAjax 将调用 PHP 和 POST $content。如果服务器上的img 不在$content 中，它将被删除。

【讨论】：

在哪里可以找到更具体的指南

【解决方案3】：

如果我们可以在客户端捕获用户删除图像操作的事件，我们可以进行删除图像的 ajax 调用。但我不知道是不是。我也在寻找解决方案。

【讨论】：

【解决方案4】：

在 Django 中，我使用正则表达式在原始 html 中查找 imgs 如果我要删除帖子，或者编辑后有不同的图片，我将删除它们

from traceback import print_exc
import re
import os

def get_imgs(html):
    pat = re.compile(r'<img [^>]*src="([^"]+)')
    imgs = pat.findall(html)
    return imgs

def delete_imgs(imgs):
    if imgs:
        base = os.getcwd()
        for img in imgs:
            try:
                img_path = os.path.join(base, img[1:])
                if os.path.exists(img_path):
                    os.remove(img_path)
            except Exception as e:
                print_exc(e)
                print(imgs)
                print(img_path)

【讨论】：