如何在Vue 3（Vite）项目中集成自定义构建的CKEditor 5

我从CKEditor 5 Online Builder生成并下载了自定义构建包（基于Webpack），但我的项目是Vue 3 + Vite环境。尝试了以下代码：

<script setup>
import CKEditor from "@/ckeditor5-custom-build/build/ckeditor"
import { component as ckeditor } from "@ckeditor/ckeditor5-vue";

const editor = ref(CKEditor);
const editorData = ref("");
const editorConfig = ref({});
</script>

<template>
    <ckeditor :editor="editor" :config="editorConfig" v-model="editorData"></ckeditor>
</template>

运行后出现如下错误：

Module not found: Error: Can't resolve 'ckeditor5-custom-build/build/ckeditor'

解决步骤 #

1. 确认构建包路径与文件完整性

将下载的自定义构建包解压后，放置到项目的src/ckeditor5-custom-build/目录下，检查该目录下是否存在build/ckeditor.js文件。如果路径不同，需同步修改导入语句中的路径。

2. 修正导入路径（添加文件后缀）

Vite的模块解析规则与Webpack不同，需要明确指定.js后缀：

<script setup>
// 加上.js后缀
import CKEditor from "@/ckeditor5-custom-build/build/ckeditor.js";
import { component as ckeditor } from "@ckeditor/ckeditor5-vue";

const editor = ref(CKEditor);
const editorData = ref("");
const editorConfig = ref({});
</script>

3. 配置Vite适配CKEditor5

在项目根目录的vite.config.js中添加以下配置，避免Vite对CKEditor5构建包的错误解析：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': '/src'
    },
    // 可选：允许省略常见文件后缀，简化导入
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
  },
  optimizeDeps: {
    // 排除CKEditor5自定义构建包，避免预构建报错
    exclude: ['ckeditor5-custom-build']
  }
})

4. 确保CKEditor5 Vue组件适配Vue3

如果安装的是旧版本的@ckeditor/ckeditor5-vue，需要切换到Vue3适配版本：

npm uninstall @ckeditor/ckeditor5-vue
npm install @ckeditor/ckeditor5-vue@next

5. 检查构建包的ES模块导出

打开自定义构建包的build/ckeditor.js文件，确认末尾存在正确的ES模块导出：

// 替换成你选择的编辑器类型，比如ClassicEditor、InlineEditor等
export default ClassicEditor;

如果没有这个导出，手动添加即可——Webpack构建的包可能默认使用全局变量，Vite需要ES模块格式的导出才能正确识别。

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