Vue3集成CKEditor5在线构建版本遇错，请求解决方案

问题背景 #

按照CKEditor5官方文档将自定义构建版本集成到Vue3项目中，组件代码如下：

// script setup
import CKEditor from '@ckeditor/ckeditor5-vue'
import ClassicEditor from 'ckeditor5-custom-build/build/ckeditor'

const editor = ClassicEditor
const ckeditor = CKEditor.component

<!-- template -->
<ckeditor :editor="editor" v-model="data.content"></ckeditor>

先后遇到两个错误：

1. 导出错误：The requested module '/ck5/build/ckeditor.js' does not provide an export named 'default'，尝试import {Editor}或import {ClassicEditor}均无效
2. 图标渲染错误：TypeError: Cannot read properties of null (reading 'getAttribute')（切换到src目录导入后出现）

解决第一个导出错误（default export） #

原因 #

Vite对ES模块的解析规则与CKEditor5自定义构建的导出格式不匹配，或包路径配置有误。

解决步骤 #

• 确认导入方式：检查自定义构建包的build/ckeditor.js文件，若为命名导出（如export { ClassicEditor }），则使用命名导入：

  import { ClassicEditor } from 'ckeditor5-custom-build/build/ckeditor'
  

• 配置Vite优化规则：在vite.config.js中添加CKEditor5的CommonJS兼容处理：

  export default {
    optimizeDeps: {
      include: ['ckeditor5-custom-build']
    },
    build: {
      commonjsOptions: {
        include: [/ckeditor5-custom-build/, /node_modules/]
      }
    }
  }
  

• 检查包入口配置：确保自定义构建包的package.json中入口字段正确指向构建文件：

  "main": "./build/ckeditor.js",
  "module": "./build/ckeditor.js"
  

解决第二个IconView空属性错误 #

原因 #

自定义构建缺失图标资源，或Vite未正确处理CKEditor5的SVG图标加载逻辑。

解决步骤 #

• 验证构建完整性：确认在线构建工具生成的包包含icons目录及所有必要SVG资源，若缺失则重新生成并下载构建文件。
• 配置Vite资源处理：在vite.config.js中添加资源识别规则与路径别名：

  import { defineConfig } from 'vite'
  import vue from '@vitejs/plugin-vue'
  
  export default defineConfig({
    plugins: [vue()],
    resolve: {
      alias: {
        'ckeditor5-custom-build': './node_modules/ckeditor5-custom-build' // 或自定义存放路径
      }
    },
    assetsInclude: ['**/*.svg'], // 让Vite识别SVG资源
    optimizeDeps: {
      exclude: ['ckeditor5-custom-build'] // 避免预构建导致资源丢失
    }
  })
  

• 使用正确的导入路径：从构建后的build目录导入，而非源码src目录（自定义构建已完成编译，无需再处理源码）：

  import ClassicEditor from 'ckeditor5-custom-build/build/ckeditor'
  

• 版本兼容性检查：确保@ckeditor/ckeditor5-vue版本与CKEditor5自定义构建版本大版本一致（如CKEditor5 39.x对应vue组件3.x）。

优化后的组件代码示例 #

// script setup
import { CKEditor } from '@ckeditor/ckeditor5-vue'
import { ClassicEditor } from 'ckeditor5-custom-build/build/ckeditor'

<!-- template -->
<CKEditor :editor="ClassicEditor" v-model="data.content" />

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