百度 UEditor 是一套功能強大的富文本編輯器，但版本迭代時常移除舊有功能，且舊版代碼難以直接複用，讓開發者頗感困擾。筆者近期升級至 1.2.5 版本後發現，原本內建的「圖片管理」中刪除圖片功能竟被移除。經過一番鑽研與修改，成功將該功能加回，現整理完整實作步驟供參考。
首先需擴充 ueditor/net/imageManager.ashx，新增處理 action=del 的邏輯，實現實體檔案刪除。
fileName 參數。upload、upload1）。File.Delete 刪除實體檔案。success 或 error 供前端判斷。<%@ WebHandler Language="C#" Class="imageManager" %>
using System;
using System.Web;
using System.IO;
using System.Text.RegularExpressions;
public class imageManager : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
// 圖片儲存目錄列表，建議使用縮略圖路徑以提升載入速度
string[] paths = { "upload", "upload1" };
string[] filetype = { ".gif", ".png", ".jpg", ".jpeg", ".bmp" };
string action = context.Server.HtmlEncode(context.Request["action"]);
// 1. 獲取圖片列表 (原有邏輯)
if (action == "get")
{
String str = String.Empty;
foreach (string path in paths)
{
DirectoryInfo info = new DirectoryInfo(context.Server.MapPath(path));
if (info.Exists)
{
DirectoryInfo[] infoArr = info.GetDirectories();
foreach (DirectoryInfo tmpInfo in infoArr)
{
foreach (FileInfo fi in tmpInfo.GetFiles())
{
if (Array.IndexOf(filetype, fi.Extension) != -1)
{
str += path + "/" + tmpInfo.Name + "/" + fi.Name + "ue_separate_ue";
}
}
}
}
}
context.Response.Write(str);
}
// 2. 【新增】刪除圖片功能
if (action == "del")
{
string fileName = context.Server.HtmlEncode(context.Request["fileName"]);
bool isDeleted = false;
try
{
foreach (string path in paths)
{
string physicalPath = context.Server.MapPath(path);
DirectoryInfo info = new DirectoryInfo(physicalPath);
if (info.Exists)
{
// 遍歷日期命名的子目錄 (如 2023-10-25)
foreach (DirectoryInfo tmpInfo in info.GetDirectories())
{
foreach (FileInfo fi in tmpInfo.GetFiles())
{
// 確認為允許的圖片類型並檔名匹配
if (Array.IndexOf(filetype, fi.Extension) != -1 && fi.Name.Equals(fileName))
{
string fullPath = physicalPath + "/" + tmpInfo.Name + "/" + fileName;
File.Delete(fullPath);
isDeleted = true;
break;
}
}
if (isDeleted) break;
}
}
if (isDeleted) break;
}
context.Response.Write(isDeleted ? "success" : "error");
}
catch
{
context.Response.Write("error");
}
}
}
public bool IsReusable { get { return false; } }
}接著修改 ueditor/dialogs/image/image.js，在「線上圖片/圖片管理」Tab 切換時，為每張圖片綁定雙擊刪除事件，並透過 AJAX 呼叫後端刪除 API。
clickHandler 函式中，切換至 imgManager Tab 時，初始化圖片列表。<img> 元素新增 ondblclick 事件。ajax.request 發送 action=del 請求。// 在 clickHandler 函式內部，id == "imgManager" 的判斷區塊中新增 ondblclick 邏輯：
if (id == "imgManager") {
list.style.display = "";
// 已初始化過則不再重複請求
if (!list.children.length) {
ajax.request(editor.options.imageManagerUrl, {
timeout: 100000,
action: "get",
onsuccess: function (xhr) {
var tmp = utils.trim(xhr.responseText),
imageUrls = !tmp ? [] : tmp.split("ue_separate_ue"),
length = imageUrls.length;
g("imageList").innerHTML = !length ? " " + lang.noUploadImage : "";
for (var k = 0, ci; ci = imageUrls[k++];) {
var img = document.createElement("img");
var div = document.createElement("div");
div.appendChild(img);
div.style.display = "none";
g("imageList").appendChild(div);
img.onclick = function () {
changeSelected(this);
};
// 【新增】雙擊刪除圖片
img.ondblclick = function () {
var me = this,
src = me.getAttribute("src", 2);
// 確認對話框
if (!confirm("刪除操作不可恢復，您確認要刪除本圖片嗎？")) return;
// 呼叫後端刪除 API
ajax.request(editor.options.imageManagerUrl, {
action: "del",
// 從 URL 中解析純檔名
fileName: src.substr(src.lastIndexOf("/") + 1),
onsuccess: function (xhr) {
if (xhr.responseText == "success") {
// 從 DOM 移除
me.parentNode.removeChild(me);
} else {
alert("伺服器刪除圖片失敗，請重試！");
}
},
onerror: function () {
alert("網路請求異常，刪除失敗。");
}
});
};
img.onload = function () {
this.parentNode.style.display = "";
var w = this.width, h = this.height;
scale(this, 100, 120, 80);
this.title = lang.toggleSelect + w + "X" + h;
this.onload = null;
};
// 設定圖片來源 (支援延遲載入)
img.setAttribute(k < 35 ? "src" : "lazy_src", editor.options.imageManagerPath + ci.replace(/\s+|\s+/ig, ""));
img.setAttribute("data_ue_src", editor.options.imageManagerPath + ci.replace(/\s+|\s+/ig, ""));
}
},
onerror: function () {
g("imageList").innerHTML = lang.imageLoadError;
}
});
}
}imageManager.ashx 至伺服器。upload 目錄的寫入/修改權限（刪除需要寫入權限）。fileName 解析邏輯。timeout，若仍有舊資料，可在請求 URL 附加時間戳參數強制刷新。透過擴充伺服器端 imageManager.ashx 與前端 image.js，我們成功為 UEditor 1.2.5+ 版本補回了「圖片管理中刪除圖片」的實用功能。此修改採用雙擊觸發搭配確認機制，兼顧操作效率與資料安全。希望這份教學能幫助同樣遇到此問題的 .NET 開發者快速解決困擾。
