Nuxt3中如何正确配置CKEditor 5？附报错与代码求助

在 Nuxt3 中配置 CKEditor 5 必须通过客户端插件实现，否则会因 SSR 环境与 CKEditor 的浏览器依赖冲突报错，以下是具体步骤：

1. 安装依赖 #

先安装 CKEditor5 的 Vue 适配包和官方经典编辑器构建版：

npm install @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classic
# 或使用 yarn
yarn add @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classic

2. 创建客户端专属插件 #

在项目根目录的 plugins 文件夹下新建 ckeditor.client.ts（.client.ts 后缀确保仅在客户端加载，规避 SSR 报错）：

import ClassicEditor from '@ckeditor/ckeditor5-build-classic'
import CKEditor from '@ckeditor/ckeditor5-vue'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(CKEditor, { ClassicEditor })
})

3. 组件中使用编辑器 #

在任意 Vue 组件中直接引入并使用，示例组件代码：

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

<script setup lang="ts">
import ClassicEditor from '@ckeditor/ckeditor5-build-classic'

const editorContent = ref('<p>编辑器初始内容</p>')
// 自定义工具栏与配置
const editorConfig = ref({
  toolbar: [
    'heading', '|',
    'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo'
  ],
  placeholder: '请输入内容...'
})
</script>

<style scoped>
.editor-wrapper :deep(.ck-editor__editable_inline) {
  min-height: 300px;
}
</style>

常见问题处理 #

• window is not defined 报错：检查插件文件后缀是否为 .client.ts，Nuxt 会自动识别客户端插件，避免在 SSR 阶段执行浏览器相关代码。
• 自定义编辑器功能：若需要添加官方 build 包没有的插件（如代码块、上传功能），需从 CKEditor5 源码自定义构建，替换上述代码中的 @ckeditor/ckeditor5-build-classic 为你的自定义构建包。
• 样式异常：官方 build 包已内置样式，无需额外导入；自定义构建时需手动引入构建生成的 CSS 文件。

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