Vue3+Vite+Quasar项目引入自定义CKEditor5报错求助

核心问题分析 #

出现SyntaxError: ambiguous indirect export: default是因为自定义构建的CKEditor5包导出方式与当前导入方式不匹配，加上Vite对ES模块解析的特殊要求导致的。以下是针对性解决步骤：

1. 修正编辑器导入方式 #

在线构建的CKEditor5包通常使用命名导出而非默认导出。打开自定义构建包的build/ckeditor.js或src/ckeditor.js，查看最终导出语句：

• 如果是export { ClassicEditor };，则改用命名导入：

  // 替换组件中原导入语句
  import { ClassicEditor as Editor } from "ckeditor5-custom-build";
  

• 如果是export default ClassicEditor;，则保持默认导入（新版在线构建中此情况较少）。

2. 配置Vite适配CKEditor5模块解析 #

在项目根目录的vite.config.js中添加优化配置，解决Vite对CKEditor5模块的解析问题：

import { defineConfig } from 'vite';
import path from 'path';

export default defineConfig({
  optimizeDeps: {
    include: ['ckeditor5-custom-build'],
    esbuildOptions: {
      loader: {
        '.js': 'jsx'
      }
    }
  },
  resolve: {
    alias: {
      'ckeditor5-custom-build': path.resolve(__dirname, './ckeditor5-custom-build')
    }
  }
});

3. 移除组件中多余的导入 #

组件里的import ckeditor from "src/boot/ckeditor";属于冗余代码——Quasar的boot文件已经全局注册了CKEditor组件，直接删除该语句即可。

4. 配置Base64上传适配器 #

确保在线构建时已勾选Base64UploadAdapter插件，然后在编辑器配置中启用上传功能：

const editorConfig = ref({
  toolbar: [
    // 保留所需工具栏项，确保包含图片上传按钮
    'heading', 'bold', 'italic', 'imageUpload', 'link', 'bulletedList', 'numberedList', 'blockQuote'
  ]
});

注：如果自定义构建已包含该插件，无需在config.plugins中手动声明，只需确保工具栏有imageUpload按钮。

5. 避免重复模块错误 #

之前的duplicated-module错误是因为手动安装单个CKEditor5插件时，版本与核心包不一致导致重复依赖。使用在线构建包后，确保项目package.json中只保留自定义构建的ckeditor5-custom-build依赖，删除所有单独的@ckeditor/xxx插件包。

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