同一页面集成CKEditor5 Classic与Balloon编辑器遇模块重复错误

这个坑我踩过！你遇到的ckeditor-duplicated-modules错误，根本原因是你引入的两个独立构建包（ClassicEditor和BalloonEditor各自的ckeditor.js）包含了大量重复的核心模块——比如文本格式化、工具栏基础组件这些，加载两个完全独立的构建就会触发模块冲突。

最优解决方案：自定义联合构建（官方推荐） #

CKEditor5支持把你需要的多种编辑器类型打包成一个单独的构建文件，这样就不会有重复模块的问题了。步骤很简单：

1. 生成自定义构建包
   去CKEditor5的在线构建工具，选择你需要的编辑器类型（同时勾选ClassicEditor和BalloonEditor），然后添加你需要的所有插件（比如图片上传、表格这些），最后下载构建好的压缩包。

2. 替换原有引入文件
   把下载的自定义构建包替换掉你原来的两个独立包，页面里只需要引入这一个构建文件：

   <script src="plugins/ckeditor-custom/build/ckeditor.js"></script>
   

3. 修改初始化代码（注意变量覆盖问题）
   原来的代码里把两个编辑器都赋值给了window.editor，这会导致第二个编辑器覆盖第一个，记得改成不同的变量名。完整代码如下：

<div class="editorclassic"></div>
<div class="editorballoon"></div>

<script src="plugins/ckeditor-custom/build/ckeditor.js"></script>
<script>
// 初始化Classic编辑器
ClassicEditor
.create( document.querySelector( '.editorclassic' ), {
    toolbar: {
        items: [ 'heading', '|', 'bold', 'italic', 'bulletedList', 'numberedList', '|', 'imageUpload', 'blockQuote', 'insertTable', 'mediaEmbed', 'undo', 'redo' ]
    },
    language: 'pt',
    licenseKey: '',
} )
.then( editor => {
    window.classicEditor = editor; // 用独立变量存储
} )
.catch( error => {
    console.error( error );
} );

// 初始化Balloon编辑器
BalloonEditor
.create( document.querySelector( '.editorballoon' ), {
    toolbar: {
        items: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', '|', 'indent', 'outdent', '|', 'imageUpload', 'blockQuote', 'insertTable', 'mediaEmbed', 'undo', 'redo' ]
    },
    language: 'pt',
    image: {
        toolbar: [ 'imageTextAlternative', 'imageStyle:full', 'imageStyle:side' ]
    },
    table: {
        contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ]
    },
    licenseKey: '',
} )
.then( editor => {
    window.balloonEditor = editor; // 避免覆盖第一个编辑器
} )
.catch( error => {
    console.error( error );
} );
</script>

为什么不能直接引入两个独立构建？ #

CKEditor5的每个独立构建（比如Classic、Balloon）都包含了完整的核心模块和必要插件，当你加载两个时，相同的模块会被注册两次，CKEditor的模块系统会直接抛出错误阻止这种情况，避免潜在的运行时冲突。

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