如何在Nuxt.js中集成CKEditor？求助集成失败问题解决方案

看起来你在手动操作DOM初始化CKEditor的时候踩坑了——毕竟Vue组件有自己的生命周期，直接在script标签里调用ClassicEditor.create会因为DOM还没渲染完成找不到目标元素，而且官方已经为Vue2封装好了专用组件，不用这么麻烦~ 咱们一步步来修正：

1. 确认依赖版本兼容性 #

你安装的@ckeditor/ckeditor5-vue2@1.0.5和@ckeditor/ckeditor5-build-classic@25.0.0版本是匹配的，这部分没问题。

2. 在Nuxt中注册CKEditor Vue组件 #

首先创建一个Nuxt插件文件，比如plugins/ckeditor.js：

import Vue from 'vue'
import CKEditor from '@ckeditor/ckeditor5-vue2'

Vue.use(CKEditor)

然后在nuxt.config.js里注册这个插件：

export default {
  plugins: [
    '~/plugins/ckeditor.js'
  ]
}

3. 改写你的CKEditor组件（components/ckEditor.vue） #

放弃手动DOM操作，直接用官方封装的<ckeditor>组件，同时配置你的工具栏和其他选项：

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

<script>
// 如果用官方的classic build，直接导入
import ClassicEditor from '@ckeditor/ckeditor5-build-classic'

export default {
  data() {
    return {
      ClassicEditor,
      editorContent: '', // 绑定编辑器内容
      editorConfig: {
        toolbar: {
          items: [
            'heading', '|', 'undo', 'redo', '|', 'bold', 'italic', '|', 'fontColor', 'fontBackgroundColor', 'fontFamily', 'fontSize', '|', 'link', '|', 'bulletedList', 'numberedList', 'indent', 'outdent', '|', 'imageUpload', 'mediaEmbed', '|', 'insertTable'
          ]
        },
        language: 'pt-br',
        image: {
          toolbar: [
            'imageTextAlternative', 'imageStyle:full', 'imageStyle:side', 'linkImage'
          ]
        },
        table: {
          contentToolbar: [
            'tableColumn', 'tableRow', 'mergeTableCells'
          ]
        },
        licenseKey: ''
      }
    }
  }
}
</script>

<style scoped>
/* 可以在这里添加编辑器的自定义样式 */
</style>

4. 如果要用你自己在线构建的包 #

如果你不想用官方的classic build，而是用自己在线生成的构建包：

• 把你下载的构建包里的ckeditor.js和相关资源放到Nuxt的static/build/目录下（确保路径正确）
• 然后在组件里替换导入路径：

// 替换官方build的导入
import ClassicEditor from '~/static/build/ckeditor.js'

5. 在页面中正确使用组件 #

确保你在pages/index.vue里正确导入并注册组件：

<template>
  <div class="container grid">
    <CkEditor /> <!-- 注意组件名要和文件名一致 -->
  </div>
</template>

<script>
import CkEditor from '~/components/ckEditor.vue'

export default {
  components: {
    CkEditor
  }
}
</script>

为什么原来的代码失败？ #

• 你直接在script标签里调用ClassicEditor.create时，组件的<div class="editor">还没有被渲染到DOM中，document.querySelector('.editor')会返回null，导致初始化失败。
• 没有使用Vue提供的响应式绑定，手动操作DOM不符合Vue的开发模式，也容易引发其他问题。

按照上面的步骤来，应该就能顺利在Nuxt里集成CKEditor5了~

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