UEditor 添加在线管理图片删除功能

UEditor 是一种在线富文本编辑器，允许用户在不离开网站的情况下编写、编辑和格式化文本。UEditor 集成了许多有用的功能，如图像、超链接、列表等，使它成为在各种 Web 应用程序和网站上常用的一种编辑器。本文将介绍如何添加在线管理图片删除功能。

1. 配置上传图片的路径和接口

首先，需要在服务器上配置一个上传图片的路径和接口，可以通过 HTTP POST 请求将图片上传到服务器，返回一个图片 URL。这里我们使用 PHP 作为服务器端语言，假设上传的图片保存在 uploads/ 目录下，图片 URL 的前缀为 http://example.com/uploads/，则上传图片的 PHP 代码如下所示：

<?php
if (isset($_FILES["file"])) {
    $file = $_FILES["file"];
    if ($file["error"] === UPLOAD_ERR_OK) {
        $filename = time() . "_" . $file["name"];
        move_uploaded_file($file["tmp_name"], "uploads/" . $filename);
        echo "http://example.com/uploads/" . $filename;
    } else {
        echo "{\"error\": \"上传失败\"}";
    }
}
?>

将这段代码保存为 upload.php，然后在 UEditor 的配置文件中添加图片上传的配置项：

editor.config.uploadImgUrl = '/upload.php';

这里的 /upload.php 是指上传图片的接口地址，需要根据实际情况修改。

2. 显示图片

有了上传图片的接口后，就可以在 UEditor 中添加图片了。UEditor 提供了 insertImage 方法，可以将图片插入到编辑器中。例如：

editor.execCommand('insertImage', {src: 'http://example.com/uploads/test.jpg'});

这个插入图片的代码是在编辑器中直接写死了图片的 URL，这显然是不现实的。我们需要让用户可以选择自己上传的图片。

UEditor 提供了插入本地图片的功能，但是不提供在线管理图片的删除功能。因此，我们需要自己实现这个功能。

3. 显示已上传的图片

为了实现在线管理图片删除功能，需要先将已上传的图片显示出来，让用户可以选择需要删除的图片。

UEditor 中提供了 getPlainTxt 方法，可以获取编辑器中的纯文本内容。将获取到的纯文本内容解析出其中的图片 URL，然后将这些图片 URL 显示在一个列表中，如下所示：

var plainText = editor.getPlainTxt();
var urls = plainText.match(/<img[^>]+src="(https?:\/\/[^">]+)"/gi).map(function (match) {
    return /src="(https?:\/\/[^">]+)"/i.exec(match)[1];
});
var html = urls.map(function (url) {
    return '<li><img src="' + url + '"><span data-url="' + url + '">删除</span></li>';
}).join('');
document.getElementById('image-list').innerHTML = html;

这个代码中首先通过正则表达式匹配纯文本中的图片 URL，然后将这些 URL 显示在一个带有删除按钮的列表中。当用户点击删除按钮时，需要发送一个 HTTP DELETE 请求将图片从服务器中删除。

4. 添加删除功能

添加删除功能需要在上传图片的 PHP 接口中添加删除文件的代码。首先需要获取到要删除的图片文件名，然后使用 PHP 的 unlink 函数将其删除，如下所示：

<?php
if ($_SERVER["REQUEST_METHOD"] === "DELETE") {
    $url = file_get_contents("php://input");
    if (strpos($url, "http://example.com/uploads/") === 0) {
        $filename = str_replace("http://example.com/uploads/", "", $url);
        unlink("uploads/" . $filename);
        echo "{}";
    } else {
        echo "{\"error\": \"删除失败\"}";
    }
} else if (isset($_FILES["file"])) {
    // 上传图片的代码已经在上面给出
}
?>

这个 PHP 接口支持 HTTP DELETE 请求，并且可以根据图片 URL 删除相应的文件。使用 jQuery 发送 HTTP DELETE 请求，如下所示：

$(function () {
    $('ul#image-list').on('click', 'span', function () {
        var url = $(this).data('url');
        $.ajax({
            url: url,
            type: 'DELETE',
            success: function () {
                $(this).parent().remove();
            }.bind(this),
            error: function () {
                alert('删除失败');
            }
        });
    });
});

这个代码中使用 jQuery 绑定了一个点击事件，在用户点击删除按钮时发送一个 HTTP DELETE 请求并将列表项从页面中移除。

现在就完成了在线管理图片删除功能的添加。用户可以在 UEditor 中上传图片，并在一个列表中查看已上传的图片，也可以删除不需要的图片。这个功能可用于各种 Web 应用程序和网站中，极大地方便了用户的编辑和管理工作。