Vue.js 集成 CKEditor 5 自定义图像上传适配器：解决“PluginConstructor is not a constructor”错误

2024-03-12 18:02:19

在 Vue.js 中整合 CKEditor 5 的自定义图像上传适配器

问题陈述

在 Vue.js 应用中，为 CKEditor 5 集成自定义图像上传适配器时，可能会遇到 "PluginConstructor is not a constructor" 的错误。本文将深入探究这一问题的成因并提供逐步的解决方案。

解决步骤

1. 检查插件构造函数

确保自定义图像上传适配器插件的构造函数被正确导出。它应类似于以下形式：

export default class MyUploadAdapter {
    // ...
}

2. 正确注册插件

在 Vue.js 组件中，务必在 extraPlugins 选项中正确注册插件：

const editorConfig = ref({
    extraPlugins: [MyCustomUploadAdapterPlugin],

    // 其他配置
});

3. 使用正确的加载器类型

在 MyUploadAdapter 构造函数中，使用的加载器类型应与 CKEditor 5 中使用的类型一致。对于 Vue.js 应用，建议使用 FileRepository 加载器：

class MyUploadAdapter {
    constructor(loader) {
        // FileRepository 加载器
        this.loader = loader;
    }

    // ...
}

4. 检查服务器端实现

确认服务器端代码已正确配置为处理图像上传。这包括设置端点、处理文件上传并返回图像 URL。

5. 其他建议

确保正确安装了 CKEditor 5 依赖项。
检查是否存在拼写或语法错误。
尝试使用官方 CKEditor 5 示例作为参考。

示例代码

以下是一个完整的 Vue.js 组件示例，其中包含一个自定义图像上传适配器插件：

<template>
  <ckeditor
    :editor="editor"
    :config="editorConfig"
  />
</template>

<script>
import { ref } from 'vue';
import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';
import MyCustomUploadAdapterPlugin from './MyCustomUploadAdapterPlugin.js';

export default {
  components: {
    ckeditor: CKEditor,
  },
  setup() {
    const editor = ref(ClassicEditor);

    const editorConfig = ref({
      extraPlugins: [MyCustomUploadAdapterPlugin],
      toolbar: [
        'heading', '|',
        'bold', 'italic', 'link', '|',
        'bulletedList', 'numberedList', '|',
        'blockQuote', 'insertTable', '|',
        'undo', 'redo'
      ],
      image: {
        toolbar: [
          'imageStyle:inline', 'imageStyle:block',
          'imageStyle:side'
        ]
      }
    });

    return {
      editor,
      editorConfig,
    };
  },
};
</script>