Laravel 8 中 CKEditor 4 图片上传报错的原因与修复方案

1. 报错原因 #

• Uncaught ReferenceError: browser is not defined：CKEditor 4的旧版本依赖全局browser对象做浏览器兼容性判断，但Laravel 8默认的前端环境（或现代浏览器）中未定义该对象，导致兼容性代码执行失败。部分早期CKEditor 4版本未适配现代前端环境，残留了这个过时的全局依赖。
• 500内部服务器错误：通常是服务器端逻辑问题，常见原因包括：
  • 上传请求未携带CSRF令牌，被Laravel的CSRF中间件拦截；
  • 控制器ckupload方法的返回格式不符合CKEditor要求；
  • 文件存储目录无写入权限，或未创建软链接导致无法访问上传文件；
  • 路由配置错误（如请求方法不匹配、中间件设置不当）。

2. 无需升级到CKEditor 5的可靠修复方法 #

前端修复browser is not defined错误 #

• 手动注入全局browser对象：在加载CKEditor的脚本前添加以下代码，模拟CKEditor需要的浏览器检测对象：

// 页面头部script标签中添加
window.browser = {
    msie: /msie/i.test(navigator.userAgent),
    opera: /opera/i.test(navigator.userAgent),
    chrome: /chrome/i.test(navigator.userAgent),
    safari: /safari/i.test(navigator.userAgent) && !/chrome/i.test(navigator.userAgent),
    mozilla: /mozilla/i.test(navigator.userAgent) && !/(compatible|webkit)/i.test(navigator.userAgent),
    gecko: /gecko/i.test(navigator.userAgent),
    mobile: /mobile/i.test(navigator.userAgent),
    ios: /iphone|ipad|ipod/i.test(navigator.userAgent)
};

• 更新到CKEditor 4最新稳定版：CKEditor 4的后续版本（如4.20+）已移除对全局browser对象的依赖，替换为现代浏览器检测API，可直接解决该报错。

后端修复500上传错误 #

• 确保请求携带CSRF令牌：在CKEditor配置中拼接CSRF令牌到上传URL：

CKEDITOR.replace('你的编辑器ID', {
    filebrowserUploadUrl: '/ckupload?_token=' + document.querySelector('meta[name="csrf-token"]').content,
    // 其他编辑器配置项
});

• 规范控制器返回格式：ckupload方法必须返回符合CKEditor要求的JSON结构：

public function ckupload(Request $request)
{
    // 验证上传文件
    $request->validate([
        'upload' => 'required|image|max:2048', // 限制图片类型和大小，可按需调整
    ]);

    if ($file = $request->file('upload')) {
        $fileName = uniqid() . '.' . $file->getClientOriginalExtension();
        // 存储到public磁盘，需提前执行php artisan storage:link
        $filePath = $file->storeAs('uploads/articles', $fileName, 'public');
        $fileUrl = asset('storage/' . $filePath);

        return response()->json([
            'uploaded' => true,
            'fileName' => $fileName,
            'url' => $fileUrl
        ]);
    }

    return response()->json([
        'uploaded' => false,
        'error' => [
            'message' => '文件上传失败，请重试'
        ]
    ]);
}

• 检查存储权限与软链接：
  1. 运行php artisan storage:link，将storage/app/public链接到public/storage；
  2. 确保服务器用户对storage/app/public/uploads目录有写入权限，可执行chmod -R 755 storage/（根据服务器环境调整权限）。
• 确认路由配置正确：路由需为POST请求，且使用web中间件（自动处理CSRF）：

// routes/web.php
use App\Http\Controllers\PostController;

Route::post('/ckupload', [PostController::class, 'ckupload'])->name('ckupload');

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