如何用Ajax+PHP为FCKEditor文本编辑器添加图片删除功能

这篇文章就针对这个痛点，教你用Ajax+PHP快速给FCKEditor补上“图片删除”能力：不需要刷新页面，选中编辑器里的图片点击删除，就能实时删掉服务器上的图片文件，同时自动更新编辑器内容。我们会从基础原理讲起，一步步带你实现：给FCKEditor的图片绑定点击事件、用Ajax异步传递图片路径到后端、通过PHP处理文件删除逻辑，最后同步刷新编辑器内容。

全程代码示例详细，步骤清晰，即使是接触Ajax/PHP不久的新手也能跟着做。学会这招，再也不用为FCKEditor的图片管理发愁，轻松提升内容编辑的流畅度！

你是不是也遇到过这种情况？用FCKEditor写文章时，插错了图片想删掉，要么得翻服务器文件手动删，要么刷新页面重新编辑，折腾半天还容易丢内容？去年我帮朋友维护他那用了快十年的老博客时，就被这个问题烦得不行——他的博客一直没换编辑器，每次删图片都得喊我帮忙找服务器路径，后来我干脆用Ajax+PHP给他加了个图片删除功能，现在他自己点一下就能删，省了好多事。今天就把这套亲测有效的方法分享给你，没学过复杂后端也能跟着做。

为什么选Ajax+PHP？先搞懂背后的逻辑

其实一开始我也想过，能不能直接用JS删图片？试了才知道，JS只能删掉编辑器里的图片显示，但服务器上的文件还在——占空间不说，下次插图片可能又会误选相同的图。那为什么选Ajax+PHP？核心是异步+后端处理：Ajax能在不刷新页面的情况下，把图片路径传给后端；PHP刚好擅长处理文件操作，能真正删掉服务器上的图片。这俩组合起来，既能实时更新编辑器内容，又能彻底解决“删图不删文件”的痛点。

我之前试过用JQuery的$.ajax方法，比原生JS简单太多，而且兼容性好——毕竟FCKEditor是老编辑器，兼容性比什么都重要。比如你用原生JS写XMLHttpRequest，还得处理各种兼容问题，而JQuery的$.ajax已经帮你封装好了，直接传参数就行。再说说PHP，老项目的后端基本都是PHP，不用额外学新语言，找个懂点PHP的朋友帮忙看一眼，就能搞定文件删除的逻辑。

手把手教你做：从0到1实现图片删除功能

接下来直接上硬货，分四步讲具体操作——每一步我都标了踩过的坑，你照着做就能少走弯路。

第一步：给FCKEditor的图片加点击事件

要实现“点图片删图片”，首先得让编辑器里的图片能被点击触发操作。这里要注意：FCKEditor的内容是放在iframe里的，直接用页面的document拿不到里面的图片元素，得用编辑器的EditorDocument对象。

我当时是在FCKEditor的OnComplete事件里加的监听——因为编辑器加载完成后，才能获取到里面的DOM元素。具体代码长这样：

FCKeditorAPI.GetInstance('content').OnComplete = function(editor) {
 // 监听编辑器内部的点击事件
 editor.EditorDocument.addEventListener('click', function(e) {
 // 判断点击的是不是图片
 if (e.target.tagName === 'IMG') {
 // 存下当前点击的图片元素和路径
 const currentImg = e.target;
 const imgSrc = currentImg.src;
 // 后面加确认弹窗或删除逻辑
 }
 });
};

这里有个坑要避：别直接给img加onclick！因为FCKEditor里的图片是动态生成的，页面加载时img还没生成，onclick绑不上。我之前犯过这个错，折腾了半小时才发现，换成监听整个编辑器文档的点击事件，再判断目标是不是img，就解决了。

第二步：用Ajax传图片路径到后端

点击图片后，得把图片的服务器路径传给PHP——注意，不是页面上显示的绝对路径（比如http://xxx.com/upload/2024/05/12/123.jpg），而是相对路径（比如/upload/2024/05/12/123.jpg），不然PHP找不到服务器上的文件。

怎么把绝对路径转成相对路径？我用了个笨办法：用window.location.origin获取当前域名，再用replace替换掉。比如：

// 去掉域名，得到相对路径
const relativePath = imgSrc.replace(window.location.origin, '');

接下来用Ajax把路径传给后端的delete_img.php文件。我用的是JQuery的$.ajax，代码很简单：

$.ajax({
 url: 'delete_img.php', // 后端处理文件的路径
 type: 'POST', // 用POST更安全，避免路径暴露在URL里
 data: { img_path: relativePath }, // 传给后端的参数
 success: function(response) {
 if (response === 'success') {
 // 删除成功，删掉编辑器里的图片
 currentImg.parentNode.removeChild(currentImg);
 alert('图片删除成功！');
 } else {
 alert('删除失败，请重试~');
 }
 },
 error: function() {
 alert('请求出错了，检查一下后端路径对不对？');
 }
});

这里要注意：别用GET请求！我之前图省事用了GET，结果路径里的斜杠被转义成%2F，PHP接收的时候解析错了，换成POST就没问题了。

第三步：PHP后端处理文件删除（关键！）

后端的逻辑其实很简单，但安全最重要——不能让恶意请求删了服务器的重要文件。我把代码分成了三部分：

接收并验证参数；

过滤危险路径；

执行文件删除。

先看完整代码：

<?php 
// 接收POST参数
$imgPath = $_POST['img_path'] ?? '';
if (empty($imgPath)) {
 echo 'empty path';
 exit;
}
// 过滤危险路径：禁止包含../或..（防止遍历目录）
if (strpos($imgPath, '../') !== false || strpos($imgPath, '..') !== false) {
 echo 'invalid path';
 exit;
}
// 拼接服务器绝对路径（DOCUMENT_ROOT是网站根目录）
$serverPath = $_SERVER['DOCUMENT_ROOT'] . $imgPath;
// 检查文件是否存在，存在则删除
if (file_exists($serverPath)) {
 if (unlink($serverPath)) {
 echo 'success';
 } else {
 echo 'fail';
 }
} else {
 echo 'file not exists';
}
?>

这里有几个关键点要强调：

必须过滤../：比如有人传../../etc/passwd，就能删服务器的密码文件——这是大漏洞！我之前帮朋友做的时候，没加这个过滤，用漏洞扫描工具测了一下，发现能遍历目录，赶紧补上了；

用$_SERVER['DOCUMENT_ROOT']拼接路径：比如你的网站放在/var/www/html下，$serverPath就会变成/var/www/html/upload/2024/05/12/123.jpg，刚好是服务器上的文件路径；

先检查文件是否存在：避免删不存在的文件报错。

第四步：同步更新编辑器内容

Ajax请求成功后，得把编辑器里的图片删掉。我用的是currentImg.parentNode.removeChild(currentImg)——直接找到图片的父节点，删掉子节点就行。比如图片在

标签里，删掉后

标签会变成空的，但不影响内容。

有没有更稳妥的方法？比如用FCKEditor的API更新内容？我试过editor.SetHTML(editor.GetHTML().replace('', ''))，但这样会替换所有相同src的图片，不如直接删当前点击的img元素准确。

踩坑 常见问题怎么解决？

我整理了一张问题排查表，遇到问题直接对着查：

常见问题	可能原因	解决方法
点击图片没反应	事件没绑定到EditorDocument	用editor.EditorDocument.addEventListener绑定事件
Ajax请求失败	后端路径错了，或用了GET请求	检查delete_img.php的路径，改用POST请求
删了图但服务器文件还在	相对路径转错了，或PHP权限不够	检查relativePath是否正确，给服务器文件加755权限

怎么样？是不是没想象中难？我当时用了一下午就做好了，朋友现在用得可顺手了——上次他跟我说，现在删图片只需要点一下，再也不用喊我帮忙找服务器路径了。

对了，测试的时候一定要先备份服务器上的图片，避免误删；如果遇到问题，可以留言告诉我具体情况，我帮你看看。如果你按这些步骤试成功了，也欢迎回来分享你的经验！

---