如何修复 CKEditor 自定义构建中的“default”导出错误？

2024-04-01 19:23:35

修复 CKEditor 自定义构建中的“default”导出错误：一步步指南

问题

在使用自定义配置的 CKEditor 时，你可能会遇到一个恼人的错误，提示“请求的模块'/CustomCkeditor5/build/ckeditor.js'未提供名为'default'的导出”。这个错误表明自定义的 CKEditor 构建没有正确导出为具有名为“default”的导出对象的模块。

解决方案

要解决此问题，请按以下步骤操作：

确保正确的导出

在 CKEditor 构建器中，将“导出类型”选项设置为“模块”（.mjs）。这将确保构建导出一个带有名为“default”的导出对象的模块。

检查导入路径

在组件中正确导入自定义 CKEditor 构建。检查导入路径是否正确，指向构建的正确位置。

验证 CKEditor 构建

在浏览器控制台中手动导入构建，例如：

import Editor from '../../../../CustomCkeditor5/build/ckeditor.js';

成功导入后，你应该会看到类似这样的内容：

Editor { ... }

排除其他问题

确保没有其他问题导致错误，例如：

构建未正确打包或加载到应用程序中。
组件中使用的 CKEditor 版本已过时。
有任何其他 JavaScript 错误或冲突。

修复后的组件代码

根据提供的代码，修改后的组件代码如下：

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

<script lang="ts">
import Editor from '../../../../CustomCkeditor5/build/ckeditor.js';

export default {
  name: 'EditorOne',
  props: ['Value'],
  data() {
    return {
      editor: Editor,
      editorData: this.Value.content,
      editorConfig: {

      }
    };
  }
};
</script>