Laravel Admin集成CKEditor实现图片上传功能的可行性及存储位置咨询

我当前使用的是通过encore/laravel-admin包（版本约束为*）安装的Laravel Admin，随后又安装了laravel-admin-ext/ckeditor包（版本约束为*），该包为后台管理面板添加了CKEditor表单用于字段编辑。我配置的包含所有选项的代码如下：

$form->ckeditor('description', __('Description'))->required()->options( [
    'toolbarGroups' => [
        ['name' => 'clipboard', 'groups' => ['clipboard', 'spellchecker', 'source']],
        ['name' => 'undo'],
        ['name' => 'tools', 'groups' => ['tools']],
        ['name' => 'document', 'groups' => ['mode']],
        ['name' => 'maximize'],
        ['name' => 'source'],
        ['name' => 'basicstyles', 'groups' => ['basicstyles', 'cleanup', 'maximize']],
        ['name' => 'colors'],
        ['name' => 'paragraph', 'groups' => ['list', 'indent', 'blocks', 'align', 'bidi']],
        ['name' => 'others', 'groups' => ['others', 'maximize']],
        ['name' => 'about', 'groups' => ['about']],
    ],
    'removeButtons' => '',
] );

请问是否可以在上述配置选项中添加图片上传功能？如果可以，上传的图片会存储在什么位置？

当然可以给这个CKEditor配置添加图片上传功能，而且操作起来很简单，下面是具体的实现方法和细节说明：

1. 配置图片上传功能 #

你只需要在options()的配置数组里补充上传相关的参数，同时确保工具栏包含图片上传的入口按钮。修改后的代码示例如下：

$form->ckeditor('description', __('Description'))->required()->options([
    'toolbarGroups' => [
        ['name' => 'clipboard', 'groups' => ['clipboard', 'spellchecker', 'source']],
        ['name' => 'undo'],
        ['name' => 'tools', 'groups' => ['tools']],
        ['name' => 'document', 'groups' => ['mode']],
        ['name' => 'maximize'],
        ['name' => 'source'],
        ['name' => 'basicstyles', 'groups' => ['basicstyles', 'cleanup', 'maximize']],
        ['name' => 'colors'],
        ['name' => 'paragraph', 'groups' => ['list', 'indent', 'blocks', 'align', 'bidi']],
        ['name' => 'insert', 'groups' => ['insert']], // 新增分组，用于显示图片上传按钮
        ['name' => 'others', 'groups' => ['others', 'maximize']],
        ['name' => 'about', 'groups' => ['about']],
    ],
    'removeButtons' => '',
    'uploadUrl' => route('admin.upload'), // 用Laravel Admin内置的上传路由
    'uploadImage' => [
        'headers' => [
            'X-CSRF-TOKEN' => csrf_token(), // 必须带上CSRF令牌，避免请求被拦截
        ]
    ]
]);

这里要注意两个关键点：

• 必须在toolbarGroups里加入insert分组，这样CKEditor工具栏才会显示图片上传的按钮；
• uploadUrl直接使用Laravel Admin内置的admin.upload路由，这个路由已经封装好了文件上传的核心逻辑，不用自己重复造轮子。

2. 图片的默认存储位置 #

默认情况下，通过Laravel Admin内置上传功能上传的图片，会存在项目的public/uploads/images目录下。

如果你想调整存储位置，可以修改两个配置文件：

1. 在config/admin.php的upload节点里，修改存储的子目录：

'upload' => [
    'disk' => 'admin',
    'directory' => [
        'image' => 'custom-images', // 把这里改成你想要的子目录名
        'file' => 'files',
    ],
],

2. 在config/filesystems.php的disks数组里，修改admin磁盘的根目录：

'admin' => [
    'driver' => 'local',
    'root' => public_path('my-uploads'), // 把uploads改成自定义的根目录名
    'url' => env('APP_URL').'/my-uploads',
    'visibility' => 'public',
],

额外小提示 #

如果你的业务需要更个性化的上传逻辑（比如加水印、限制图片尺寸），也可以自己写上传控制器，然后把uploadUrl指向你自定义的路由。但对于大部分常规场景来说，用Laravel Admin内置的上传功能完全足够。

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