Vue.js集成CKEditor5时无法添加自定义图片上传适配器插件

错误原因 #

你传入extraPlugins的MyCustomUploadAdapterPlugin是普通函数，但CKEditor5要求插件必须是继承自Plugin基类的构造函数（类），无论使用预构建编辑器还是核心编辑器都遵循这一规范。

修复步骤 #

1. 导入CKEditor5的Plugin基类 #

在代码顶部添加依赖导入：

import { Plugin } from '@ckeditor/ckeditor5-core';

2. 将自定义插件改写为类形式 #

把原来的函数式插件改为继承Plugin的类，核心逻辑放在init方法内：

class MyCustomUploadAdapterPlugin extends Plugin {
    init() {
        const editor = this.editor;
        editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
            return new MyUploadAdapter(loader);
        };
    }
}

3. 修正编辑器导入方式（推荐） #

如果你是快速集成场景，建议使用预构建的ClassicEditor，替换原导入语句：

// 替换原导入的核心编辑器类
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

若坚持使用核心编辑器类（@ckeditor/ckeditor5-editor-classic），需手动将Image、Toolbar等必要插件添加到plugins配置项，否则会缺失FileRepository这类依赖插件。

4. 验证配置正确性 #

确保editorConfig的extraPlugins使用改写后的类：

const editorConfig = ref({
    extraPlugins: [MyCustomUploadAdapterPlugin],
    // 其他配置项...
});

5. 补充依赖安装（若缺失） #

如果未安装@ckeditor/ckeditor5-core，执行安装命令：

npm install @ckeditor/ckeditor5-core

使用预构建版本时，确保已安装对应包：

npm install @ckeditor/ckeditor5-build-classic

补充优化 #

Laravel环境下需在上传请求中添加CSRF令牌，可在_initRequest方法中添加：

xhr.setRequestHeader('X-CSRF-TOKEN', document.querySelector('meta[name="csrf-token"]').content);

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