CKEditor 4图片上传异常：上传脚本需返回何种JSON参数？

环境与配置 #

• CKEditor版本：4.16.2
• 启用插件：filebrowser、uploadimage、uploadwidget
• 未使用CKFinder

CKEditor配置代码 #

CKEDITOR.config.filebrowserUploadUrl = '/path/to/upload.php?type=image';
CKEDITOR.config.filebrowserUploadMethod = 'form';

当前upload.php脚本 #

$type = $_GET['type'];
if($type == 'image'){

    $allowed_extension = array("png","jpg","jpeg");
    $file_extension = pathinfo($_FILES["upload"]["name"], PATHINFO_EXTENSION);
    if(in_array(strtolower($file_extension),$allowed_extension)){       
       if(move_uploaded_file($_FILES['upload']['tmp_name'], "uploads/".$_FILES['upload']['name'])){
        $url = "/$pathToUploadedImageDir/".$_FILES['upload']['name'];
      
        // 拖拽、粘贴上传正常，但图片窗口上传无效
        echo json_encode( array('uploaded'=> 1, 
           'filename' => $_FILES['upload']['name'], 
           'url' => $url ) ) ;

       } else {        
            echo "Image not uploaded";
       }
    }
    exit;
}

问题现象 #

拖拽上传、粘贴截图功能正常，但通过图片窗口的「上传」标签上传时：

1. 图片已成功保存到指定目录
2. 上传按钮位置显示返回的JSON文本，无后续自动操作
3. 期望上传后自动切换到「图片信息」标签，显示预览并填充URL、宽高（类似CKEditor示例用CKFinder的效果）
4. 浏览器控制台无报错

解决方案 #

核心原因：两种上传场景的响应格式要求不同 #

• 拖拽/粘贴上传：依赖uploadimage插件，要求返回JSON格式响应
• 图片窗口上传：依赖filebrowser插件，要求返回HTML包裹的JavaScript回调脚本，调用CKEditor内置API完成后续操作

修改后的upload.php兼容代码 #

$type = $_GET['type'];
if($type == 'image'){
    $allowed_extension = array("png","jpg","jpeg");
    $file_extension = pathinfo($_FILES["upload"]["name"], PATHINFO_EXTENSION);
    
    // 成功上传逻辑
    if(in_array(strtolower($file_extension),$allowed_extension)){       
       if(move_uploaded_file($_FILES['upload']['tmp_name'], "uploads/".$_FILES['upload']['name'])){
        $url = "/$pathToUploadedImageDir/".$_FILES['upload']['name'];
        $filename = $_FILES['upload']['name'];

        // 区分上传场景，返回对应格式
        $callback = $_GET['CKEditorFuncNum'] ?? null;
        if($callback){
            // 图片窗口上传：返回CKEditor要求的JS回调
            echo "<script type='text/javascript'>
                window.parent.CKEDITOR.tools.callFunction($callback, '$url', '');
            </script>";
        } else {
            // 拖拽/粘贴上传：返回JSON
            echo json_encode( array(
                'uploaded'=> 1, 
                'filename' => $filename, 
                'url' => $url 
            ) ) ;
        }
       } else {        
            // 上传失败处理
            $errorMsg = "图片上传失败";
            $callback = $_GET['CKEditorFuncNum'] ?? null;
            if($callback){
                echo "<script type='text/javascript'>
                    window.parent.CKEDITOR.tools.callFunction($callback, '', '$errorMsg');
                </script>";
            } else {
                echo json_encode( array(
                    'uploaded'=> 0, 
                    'error' => array('message' => $errorMsg)
                ) ) ;
            }
       }
    } else {
        // 格式错误处理
        $errorMsg = "不支持的图片格式";
        $callback = $_GET['CKEditorFuncNum'] ?? null;
        if($callback){
            echo "<script type='text/javascript'>
                window.parent.CKEDITOR.tools.callFunction($callback, '', '$errorMsg');
            </script>";
        } else {
            echo json_encode( array(
                'uploaded'=> 0, 
                'error' => array('message' => $errorMsg)
            ) ) ;
        }
    }
    exit;
}

关键说明 #

1. CKEditorFuncNum参数：图片窗口上传时，CKEditor会自动在请求URL中携带该参数，用于标识回调函数序号
2. 回调逻辑：通过window.parent.CKEDITOR.tools.callFunction调用CKEditor内置方法，自动完成图片URL填充、切换到「图片信息」标签的操作
3. 权限与路径：确保上传目录有正确的读写权限，$pathToUploadedImageDir变量指向的路径是CKEditor可访问的有效路径

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