使用Editor.js开发文章编辑器时的图片上传报错求助

问题根源分析 #

1. 后端响应格式不符合Editor.js要求：ImageTool强制要求返回的JSON必须包含success字段（值为1）和嵌套的file对象，你当前直接返回url等字段，导致工具判定响应无效。
2. PHP路径逻辑错误：你的$uploadDir使用了public_html/News/uploads/，如果SS.php本身位于/public_html/News/目录下，这个相对路径会导致在News目录下额外创建public_html/News/uploads层级，实际应使用相对当前脚本的路径。
3. PHP运行报错：第22行的Cannot access offset of type string on string错误，大概率是$_SERVER['HTTP_HOST']在服务器环境中未正确取值，或是路径拼接时出现类型异常。
4. 前端JS语法错误：Quote工具的captionPlaceholder值使用了未转义的单引号，会导致JS解析失败，可能影响编辑器初始化。

修复步骤 #

1. 修正后端PHP代码 #

<?php
// 强制返回JSON格式响应
header('Content-Type: application/json');

// 临时开启错误显示，方便排查（上线后可关闭）
error_reporting(E_ALL);
ini_set('display_errors', 1);

if (isset($_FILES['image']) && $_FILES['image']['error'] === UPLOAD_ERR_OK) {
    $file = $_FILES['image'];
    $fileName = basename($file['name']); // 二次过滤文件名，防范路径注入
    $fileTmpName = $file['tmp_name'];
    $fileSize = $file['size'];
    $fileType = $file['type'];

    // 使用绝对路径定义上传目录，避免相对路径混乱
    $uploadDir = __DIR__ . '/uploads/';
    // 确保上传目录存在，不存在则递归创建
    if (!is_dir($uploadDir)) {
        mkdir($uploadDir, 0755, true);
    }
    $uploadFile = $uploadDir . $fileName;

    if (move_uploaded_file($fileTmpName, $uploadFile)) {
        // 生成正确的访问URL
        $imageUrl = 'http://' . $_SERVER['HTTP_HOST'] . '/News/uploads/' . $fileName;

        // 严格按照Editor.js ImageTool要求的格式返回响应
        $response = [
            'success' => 1,
            'file' => [
                'url' => $imageUrl,
                'name' => $fileName,
                'size' => $fileSize,
                'type' => $fileType
            ]
        ];
        echo json_encode($response);
    } else {
        echo json_encode([
            'success' => 0,
            'message' => 'Ошибка при загрузке файла.'
        ]);
    }
} else {
    echo json_encode([
        'success' => 0,
        'message' => 'Файл не был загружен.'
    ]);
}

2. 修正前端JS代码 #

修复Quote工具的单引号转义问题，确保编辑器初始化正常：

const editor = new EditorJS({
    tools: {
        header: {
            class: Header,
            inlineToolbar: ['link']
        },
        embed: {
            class: Embed,
            inlineToolbar: false,
            config: {
                services: {
                    youtube: true
                }
            }
        },
        list: {
            class: List,
            inlineToolbar: true,
            config: {
                defaultStyle: 'unordered'
            }
        },
        quote: {
            class: Quote,
            inlineToolbar: true,
            shortcut: 'CMD+SHIFT+O',
            config: {
                quotePlaceholder: 'Enter a quote',
                captionPlaceholder: "Quote's author", // 改用双引号包裹避免语法错误
            },
        },
        imageSi: SimpleImage,
        image: {
            class: ImageTool,
            config: {
                endpoints: {
                    byFile: 'http://n92576ob.beget.tech/News/SS.php',
                }
            },
        },
    },
    holder: 'editorjs'
});

3. 额外检查项 #

• 确保服务器上的uploads目录拥有写入权限（推荐设置为755或775）。
• 若之前尝试自定义上传器失败，修复响应格式后使用默认endpoints方式即可正常工作。

内容的提问来源于stack exchange，提问作者Санчоус Великий