CKEditor 4图片上传与拖拽功能冲突问题求助

我在网站中集成CKEditor 4并配置了图片上传功能，浏览器上传（通过对话框选择文件）可正常使用，但设置filebrowserUploadUrl后，默认的拖拽上传功能出现异常。

问题根源 #

拖拽上传与传统对话框上传的请求逻辑存在差异：

• 传统上传会通过GET传递CKEditorFuncNum，并期望返回执行window.parent.CKEDITOR.tools.callFunction的脚本
• 拖拽上传通过POST传递参数，且要求返回JSON格式响应
• 原配置中filebrowserUploadParams错误地将CKEditorFuncNum设为编辑器名称，而非正确的功能编号

修正后的CKEditor配置 #

CKEDITOR.replace('newsBodytext', {
    height: 200,
    language: 'da',
    format_tags: 'p;h2;h3;h4;h5;pre',
    removeButtons: 'Underline,Strike,Styles,Anchor,About',
    filebrowserUploadUrl: 'ck_upload.php',
    filebrowserUploadMethod: 'form'
    // 移除错误的filebrowserUploadParams配置，CKEditor会自动处理必要参数
});

修正后的PHP上传脚本（ck_upload.php） #

<?php
// 定义上传目录（确保该目录有写入权限）
$uploadDir = $_SERVER['DOCUMENT_ROOT'] . '/user_upload/';
$allowedExts = ['jpg', 'gif', 'png'];
$response = [];

// 处理文件上传
if (isset($_FILES['upload'])) {
    $file = $_FILES['upload'];
    $fileName = $file['name'];
    $fileTmpName = $file['tmp_name'];
    $fileError = $file['error'];

    if ($fileError === UPLOAD_ERR_OK) {
        $fileExt = strtolower(pathinfo($fileName, PATHINFO_EXTENSION));
        if (in_array($fileExt, $allowedExts)) {
            // 生成唯一文件名（避免覆盖）
            $newFileName = uniqid('', true) . '.' . $fileExt;
            $uploadPath = $uploadDir . $newFileName;

            if (move_uploaded_file($fileTmpName, $uploadPath)) {
                $fileUrl = '/user_upload/' . $newFileName;

                // 判断上传类型：传统上传有CKEditorFuncNum参数
                if (isset($_GET['CKEditorFuncNum'])) {
                    // 传统上传：返回callFunction脚本
                    $funcNum = $_GET['CKEditorFuncNum'];
                    echo "<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction($funcNum, '$fileUrl', '');</script>";
                } else {
                    // 拖拽上传：返回JSON响应
                    $response = [
                        'uploaded' => 1,
                        'fileName' => $newFileName,
                        'url' => $fileUrl
                    ];
                    header('Content-Type: application/json');
                    echo json_encode($response);
                }
                exit;
            } else {
                $errorMsg = '文件上传失败';
            }
        } else {
            $errorMsg = '不允许的文件格式';
        }
    } else {
        $errorMsg = '上传错误，错误码：' . $fileError;
    }
} else {
    $errorMsg = '未接收到上传文件';
}

// 错误处理：根据上传类型返回对应格式的错误提示
if (isset($_GET['CKEditorFuncNum'])) {
    $funcNum = $_GET['CKEditorFuncNum'];
    echo "<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction($funcNum, '', '$errorMsg');</script>";
} else {
    $response = [
        'uploaded' => 0,
        'error' => ['message' => $errorMsg]
    ];
    header('Content-Type: application/json');
    echo json_encode($response);
}
?>

修改说明 #

1. 移除了手动设置CKEditorFuncNum的错误配置，让CKEditor自动处理参数传递逻辑
2. PHP脚本新增请求类型判断，分别返回传统上传需要的脚本响应和拖拽上传要求的JSON响应
3. 用uniqid替代rand生成文件名，避免文件覆盖风险
4. 完善了错误处理流程，两种上传方式都会返回明确的错误提示

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