CKEditor3升级到4.16.12后自定义上传接口非图片文件返回响应错误

问题核心原因 #

CKEditor 4 对不同类型的资源上传响应要求存在差异：你之前版本的JS回调写法仅兼容旧版图片上传逻辑，PDF等非图片文件的上传流程默认要求返回标准JSON格式，且必须携带核心状态字段，你之前尝试的JSON格式都缺少必填参数，也未设置正确的响应头，才会导致解析错误和undefined提示。

另外你第二段调整JSON的代码存在语法错误：'funcNum' => $funcNum'], 多了一个多余的右中括号，需要先修正这个语法问题。

正确的upload.php调整方案 #

首先确认你在CKEditor初始化时配置的是filebrowserUploadUrl参数指向upload.php，按下面的规则返回内容即可：

1. 必须先设置正确的响应头 #

在输出任何返回内容前添加响应头，否则CKEditor会将返回值识别为普通文本，触发JSON解析失败报错：

header('Content-Type: application/json; charset=utf-8');

2. 上传成功的返回格式 #

必填uploaded字段值为1，标识上传成功，同时返回文件访问地址：

$return_data = [
    'uploaded' => 1,
    'fileName' => '你的实际文件名.pdf', // 可选，建议填实际的文件名称
    'url' => $url // 必须，文件的公网可访问完整地址
];
echo json_encode($return_data);
exit;

3. 上传失败的返回格式 #

必填uploaded字段值为0，同时在error字段中返回错误提示：

$return_data = [
    'uploaded' => 0,
    'error' => [
        'message' => $message // 实际错误提示内容，比如文件大小超限、格式不允许等
    ]
];
echo json_encode($return_data);
exit;

兼容旧版图片上传逻辑的方案 #

如果你需要同时保留之前图片上传的JS回调逻辑，可以按上传文件类型判断返回格式：

// 判断是否为图片类型
$imageExt = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
$ext = strtolower(pathinfo($url, PATHINFO_EXTENSION));
if (in_array($ext, $imageExt)) {
    // 图片走旧的JS回调逻辑
    echo "<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction($funcNum, '$url', '$message')</script>";
} else {
    // 非图片走标准JSON返回逻辑
    header('Content-Type: application/json; charset=utf-8');
    $return_data = [
        'uploaded' => 1,
        'fileName' => basename($url),
        'url' => $url
    ];
    echo json_encode($return_data);
}
exit;

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