Vue项目集成自定义CKEditor5遭遇编译失败错误求助

问题 #

在Vue应用中集成自定义CKEditor5时出现failed to compile错误，触发298个ESLint报错，包含define未定义、未使用变量、空块语句等类型。

操作流程：

1. 通过CKEditor在线工具生成自定义构建包
2. 将构建包放入项目根目录新建的ckeditor文件夹
3. 组件代码实现如下：

<template>
   <ckeditor :editor="newsEditor" :config="editorConfig" class="form-control" v-model="text"></ckeditor>
</template>

<script>
import Editor from 'ckeditor5-custom-build/build/ckeditor'
export default {
  data() {
    return  {
      newsEditor: Editor,
    }
  }
}
</script>

解决方案 #

• 修正导入路径
  自定义构建包存放于项目根目录的ckeditor文件夹，需调整导入语句匹配实际路径：

  import Editor from './ckeditor/ckeditor5-custom-build/build/ckeditor'
  

• 排除CKEditor目录的ESLint检查
  自定义构建包的代码不符合项目ESLint规则，在ESLint配置文件（如.eslintrc.js或package.json）中添加忽略规则，跳过该目录的检查：

  // .eslintrc.js示例配置
  module.exports = {
    // ...其他配置项
    ignorePatterns: ["ckeditor/**/*"]
  }
  

• 补全未定义变量
  模板中使用的editorConfig和text未在data中声明，需补充完整：

  data() {
    return  {
      newsEditor: Editor,
      editorConfig: {}, // 可按需添加CKEditor配置参数
      text: '' // 绑定富文本内容的变量
    }
  }
  

• 安装并注册官方Vue适配组件
  缺少CKEditor官方提供的Vue集成组件，先执行安装命令：

  npm install @ckeditor/ckeditor5-vue
  

  再在组件中注册使用：

  import CKEditor from '@ckeditor/ckeditor5-vue';
  
  export default {
    components: {
      CKEditor
    },
    // ...其他代码
  }
  

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