如何在单次构建中集成2个不同ckEditor5并解决editor.create不是函数报错

根因说明 #

该报错核心是组件绑定的this.editor不是合法的CKEditor构造类，通常由多编辑器构建时导出配置错误、模块冲突、实例未正确加载三类问题导致。

解决步骤 #

• 调整构建配置的导出规则，禁止多个编辑器共用默认导出，改用命名导出区分不同编辑器实例，webpack配置参考如下：

// webpack.config.js 核心配置片段
const path = require('path');

module.exports = {
  entry: {
    classic: './src/editors/classic.js',
    inline: './src/editors/inline.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'ckeditor-[name].js',
    library: ['CKEditor', '[name]'],
    libraryExport: 'default',
    libraryTarget: 'umd'
  },
  // 其余配置保留官方要求的CKEditor构建规则即可
}

• 每个编辑器的入口文件必须显式导出构造类，示例如下：

// src/editors/classic.js
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
// 其他所需插件导入...

export default class MyClassicEditor extends ClassicEditor {}

// 插件配置
MyClassicEditor.builtinPlugins = [Essentials /* 其余插件 */];
MyClassicEditor.defaultConfig = {
  // 对应编辑器配置项
};

• 组件内导入时匹配对应的命名导出对象，确保赋值给组件的editor变量是正确的构造类：

// 组件内导入示例
import * as CKEditorBundle from './dist/ckeditor-classic';
// 赋值给组件属性
this.editor = CKEditorBundle.CKEditor.classic;

• 若存在多编辑器插件重复打包冲突，需要拆分公共依赖：将两个编辑器共用的插件、核心依赖通过DllPlugin打包为公共动态链接库，避免依赖重复注册导致构造类被覆盖。
• 增加组件渲染判断，确保editor构造类完全加载完成后再渲染编辑器组件，Angular项目可加*ngIf="editor"，Vue项目可加v-if="editor"，React项目可加条件渲染逻辑，避免未完成赋值就触发编辑器初始化。

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