CKEditor集成SimpleUploadAdapter轻松实现图像上传

使用 CKEditor 集成 SimpleUploadAdapter 实现图像上传

简介

CKEditor 是一个流行的富文本编辑器，它允许用户创建和编辑网页内容。使用 SimpleUploadAdapter 插件，用户可以轻松地将图像上传到他们的编辑器中。本教程将指导你逐步集成 SimpleUploadAdapter，使你在 CKEditor 中实现图像上传功能。

安装 SimpleUploadAdapter

• 打开命令行或终端，导航到项目目录，运行以下命令：

npm install --save @ckeditor/ckeditor5-adapter-simple-upload

配置编辑器

在 HTML 页面中，更新 CKEditor 配置：

ClassicEditor
    .create(document.querySelector('#editor'), {
      simpleUpload: {
        uploadUrl: '<%= base_url() %>admin/pages/upload/',
        headers: {
          Authorization: 'Bearer <JSON Web Token>'
        }
      }
    })

创建上传控制器

在你的控制器中，添加以下上传处理函数：

public function upload()
{
  $image = $this->request->getFile('upload');
  if ($image->isValid() && !$image->hasMoved()) {
    $newName = $image->getRandomName();
    $path = 'public/images/uploads/' . $newName;
    $image->move(FCPATH . $path);
    $response = [
      'url' => base_url($path)
    ];
    return $this->respond($response);
  }
}

测试上传

保存更改并加载包含 CKEditor 的页面。点击图像上传按钮，选择一个图像，图像应成功上传并显示在编辑器中。

提示

• 确保 uploadUrl 指向上传控制器的 URL。
• 检查配置和代码是否正确，以解决任何问题。

常见问题解答

1. 图像无法上传？
   • 检查服务器权限和图像大小限制。
2. 上传进度如何跟踪？
   • 使用 onUploadProgress 事件侦听器。
3. 如何限制上传文件类型？
   • 在 simpleUpload.uploadUrl 中添加 accept 属性，指定允许的文件类型。
4. 如何使用多个图像上传器？
   • 在 config.js 中配置 plugins.get('SimpleUploadAdapter')。
5. 如何使用自定义上传逻辑？
   • 覆盖 simpleUpload.uploadHandler 以实现自定义上传处理。

结论

集成 SimpleUploadAdapter 为你的 CKEditor 实例添加了图像上传功能。通过遵循本教程，你可以轻松实现此功能，并丰富你的编辑体验。