PHP环境下Froala Editor v4图片删除功能实现问题求助

前端核心问题 #

1. 重复初始化编辑器：你创建了两次new FroalaEditor('#edit')，第二次实例会完全覆盖第一次，导致之前的配置和后续的事件绑定全部失效。
2. 事件绑定方式错误：直接修改editor.opts.events不是官方推荐的绑定方法，正确做法是在初始化编辑器时通过配置项指定事件。
3. 缺失jQuery依赖：你的AJAX代码用了$，但页面里没引入jQuery，这会导致AJAX请求无法执行。

修复后的前端代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href='https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css' rel='stylesheet' type='text/css' />
<script type='text/javascript' src='https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js'></script>
<!-- 引入jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="sample">
<h2>File upload example.</h2>
<form>
<textarea id="edit" name="content"></textarea>
</form>
</div>

<script>
// 只初始化一次编辑器，并在配置中绑定事件
new FroalaEditor('#edit', {
  imageUploadURL: 'upload_image.php',
  fileUploadParams: {
    id: 'my_editor'
  },
  events: {
    'image.removed': function (e, editor, $img) {
      $.ajax({
        method: 'POST',
        url: 'delete_image.php',
        data: {
          src: $img.attr('src')
        }
      })
      .done(function (data) {
        console.log('Image was deleted');
      })
      .fail(function (err) {
        console.log('Image delete problem: ' + JSON.stringify(err));
      })
    }
  }
});
</script>
</body>
</html>

后端删除脚本问题 #

1. 未引入Froala SDK：FroalaEditor_Image类属于官方PHP SDK，如果你没下载引入SDK，这个类会直接报错。
2. URL无法直接用于删除：前端传的src是完整URL，服务器无法直接用它删除本地文件，需要转成服务器本地路径。

方案一：不依赖SDK，手动实现删除 #

修改delete_image.php：

<?php
try {
  $imageUrl = $_POST['src'];
  // 对应上传时的目录
  $uploadDir = dirname(__FILE__) . '/uploads/';
  // 从URL中提取文件名
  $filename = basename(parse_url($imageUrl, PHP_URL_PATH));
  $filePath = $uploadDir . $filename;

  if (file_exists($filePath) && is_file($filePath)) {
    if (unlink($filePath)) {
      echo json_encode(['status' => 'success']);
    } else {
      throw new Exception('删除文件失败');
    }
  } else {
    throw new Exception('文件不存在');
  }
} catch (Exception $e) {
  http_response_code(404);
  echo json_encode(['error' => $e->getMessage()]);
}
?>

方案二：使用官方SDK（已引入SDK时用） #

先确保已下载并引入Froala PHP SDK，再修改代码：

<?php
// 引入SDK文件，路径根据实际情况调整
require_once 'froala-sdk/lib/FroalaEditor.php';

try {
  // 设置和上传一致的目录
  FroalaEditor_Image::setUploadPath(dirname(__FILE__) . '/uploads/');
  $response = FroalaEditor_Image::delete($_POST['src']);
  echo json_encode(['status' => 'success']);
} catch (Exception $e) {
  http_response_code(404);
  echo json_encode(['error' => $e->getMessage()]);
}
?>

必做检查项 #

• 确保uploads目录有写入和删除权限（一般设置为755或777，根据服务器配置调整）。
• 打开浏览器开发者工具（F12），查看Network标签，检查删除请求的状态码和响应内容，定位具体报错。
• 确认上传的图片确实保存在uploads目录下，且文件名和URL中的一致。

内容的提问来源于stack exchange，提问作者arman