Vue 3集成CKEditor 5添加CodeBlock插件遇重复模块错误求助

错误原因 #

你遇到的ckeditor-duplicated-modules错误，本质是预构建的ClassicEditor已经打包了全套核心模块，单独引入CodeBlock插件时，会重复加载部分核心依赖，导致模块冲突。

短期解决方法（适配Vue3 <script setup>风格） #

方法一：手动组装编辑器（无需预构建包） #

1. 先卸载预构建的ClassicEditor：

npm uninstall @ckeditor/ckeditor5-build-classic

2. 安装必要的编辑器核心、基础功能及CodeBlock插件：

npm install @ckeditor/ckeditor5-editor-classic @ckeditor/ckeditor5-core @ckeditor/ckeditor5-code-block @ckeditor/ckeditor5-basic-styles @ckeditor/ckeditor5-heading @ckeditor/ckeditor5-paragraph @ckeditor/ckeditor5-toolbar @ckeditor/ckeditor5-essentials

3. 修改组件代码：

<script setup>
import { reactive } from 'vue'
import CKEditor from '@ckeditor/ckeditor5-vue'
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor'
// 导入需要的插件
import CodeBlock from '@ckeditor/ckeditor5-code-block/src/codeblock'
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials'
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph'
import Heading from '@ckeditor/ckeditor5-heading/src/heading'
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold'
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic'

const ckeditor = CKEditor.component
const editorConfig = {
  plugins: [Essentials, Paragraph, Heading, Bold, Italic, CodeBlock],
  // 配置工具栏，确保CodeBlock按钮显示
  toolbar: ['heading', '|', 'bold', 'italic', '|', 'codeBlock']
}
const data = reactive({
  title: "judulnya",
  content:'<b>Isi Post ni bos</b>'
})
const submitPost = ()=>{
  let form = {...data}
  console.log(form)
}
</script>
<template>
  <div class="container-fluid p-0">
    <div class="row">
      <div class="col-12">
        <div class="card">
          <div class="card-body">
            <form @submit.prevent="submitPost">
              <div class="mb-3">
                <input type="text" v-model="data.title" class="form-control">
              </div>
              <div class="mb-3">
                <ckeditor :config="editorConfig" :editor="ClassicEditor" v-model="data.content"></ckeditor>
              </div>
              <button type="submit" class="btn btn-primary">Post</button>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div> 
</template>
<style>
.ck-editor__editable {min-height: 50vh;}
</style>

方法二：使用自定义预构建包（更简便） #

1. 用CKEditor在线构建工具，选择ClassicEditor作为基础模板，添加CodeBlock插件后下载生成的压缩包。
2. 将解压后的文件夹复制到项目的src/assets/ckeditor目录（可自定义路径）。
3. 修改组件代码：

<script setup>
import { reactive } from 'vue'
import CKEditor from '@ckeditor/ckeditor5-vue'
// 导入自定义构建的编辑器
import ClassicEditor from '@/assets/ckeditor/build/ckeditor'

const ckeditor = CKEditor.component
const editorConfig = {
  // 直接配置工具栏，CodeBlock已包含在构建中
  toolbar: ['heading', '|', 'bold', 'italic', '|', 'codeBlock']
}
const data = reactive({
  title: "judulnya",
  content:'<b>Isi Post ni bos</b>'
})
const submitPost = ()=>{
  let form = {...data}
  console.log(form)
}
</script>
<!-- template和style部分保持原代码不变 -->

内容的提问来源于stack exchange，提问作者Matius Nugroho Aryanto