CKEditor图片上传失败求助：JS+PHP解决filerepository-no-upload-adapter错误

核心问题原因 #

你当前引入的CKEditor5 Classic核心包不包含Simple Upload Adapter插件，虽然配置里写了simpleUpload，但编辑器找不到对应的上传适配器，因此触发该错误。

具体解决步骤 #

1. 替换CKEditor的CDN资源 #

将index.html中的CKEditor脚本链接，替换为包含Simple Upload Adapter的构建版本：
原代码：

<script src="https://cdn.ckeditor.com/ckeditor5/34.0.0/classic/ckeditor.js"></script>

替换为：

<script src="https://cdn.ckeditor.com/ckeditor5/34.0.0/classic-with-all-plugins/ckeditor.js"></script>

（注：全插件版本适合快速验证功能，若需精简，可自行构建仅包含核心+Simple Upload Adapter的版本）

2. 简化前端配置 #

移除不必要的CSRF头（若PHP端未做CSRF校验），简化后的配置如下：

ClassicEditor
    .create(document.querySelector('#editor'), {
        simpleUpload: {
            uploadUrl: 'upload.php'
        }
    })
    .catch(error => {
        console.error(error);
    });

3. 完善PHP端逻辑 #

你的upload.php已有基础框架，补充类型、大小限制及权限处理，优化后的代码：

<?php
header('Content-Type: application/json');

if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
    echo json_encode(['error' => '仅支持POST请求']);
    exit;
}

if (!isset($_FILES['upload']) || $_FILES['upload']['error'] !== UPLOAD_ERR_OK) {
    echo json_encode(['error' => '文件上传失败，请检查文件是否合法']);
    exit;
}

$fileTmpPath = $_FILES['upload']['tmp_name'];
$fileName = $_FILES['upload']['name'];
$fileSize = $_FILES['upload']['size'];

// 限制仅允许图片格式
$allowedExtensions = ['jpg', 'jpeg', 'png', 'gif'];
$fileExtension = strtolower(pathinfo($fileName, PATHINFO_EXTENSION));
if (!in_array($fileExtension, $allowedExtensions)) {
    echo json_encode(['error' => '仅允许上传JPG、JPEG、PNG、GIF格式的图片']);
    exit;
}

// 限制文件大小不超过2MB
$maxFileSize = 2 * 1024 * 1024;
if ($fileSize > $maxFileSize) {
    echo json_encode(['error' => '文件大小不能超过2MB']);
    exit;
}

$uploadFileDir = './uploads/';
if (!file_exists($uploadFileDir)) {
    mkdir($uploadFileDir, 0755, true);
}

// 生成唯一文件名避免冲突
$newFileName = md5(uniqid() . $fileName) . '.' . $fileExtension;
$dest_path = $uploadFileDir . $newFileName;

if (move_uploaded_file($fileTmpPath, $dest_path)) {
    $response = [
        'url' => 'uploads/' . $newFileName
    ];
    echo json_encode($response);
} else {
    echo json_encode(['error' => '无法将文件移动到上传目录，请检查目录权限']);
}
?>

4. 确认uploads目录权限 #

确保uploads目录拥有PHP进程可写入的权限：

• 测试环境可临时设置为777，生产环境推荐设置为755

验证测试 #

完成修改后刷新页面，尝试上传图片：

• 成功则编辑器自动插入图片
• 若仍报错，查看浏览器控制台或PHP错误日志定位问题

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