Nuxt 3集成CKEditor 5报错：组件缺少模板或渲染函数

已安装依赖：

npm i @ckeditor/ckeditor5-build-classic @ckeditor/ckeditor5-vue

组件模板代码：

<template>
    <div class="w-full h-[400px]">
    <CKEditor
        v-model="text"
        :editor="ClassicEditor"
        :config="config"/>
    </div>
</template>

组件setup代码：

import ClassicEditor from '@ckeditor/ckeditor5-build-classic'
import CKEditor from "@ckeditor/ckeditor5-vue";
const config = {
    toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote' ],
    heading: {
        options: [
            { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
            { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
            { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' }
        ]
    }
}
const text = ref('')

根组件引入：

<client-only>
  <InputWysiwyg/>
</client-only>

打开包含富文本编辑器的页面时，收到警告：Component is missing template or render function. 针对CKEditor元素，询问操作哪里有误？

错误根源是CKEditor组件的导入方式不正确。@ckeditor/ckeditor5-vue包导出的是插件对象，而非直接可用的组件，需按以下方式修正：

方式一：局部解构导入组件 #

修改组件中的导入代码，解构出真正的CKEditor组件：

import ClassicEditor from '@ckeditor/ckeditor5-build-classic'
// 解构导入CKEditor组件
import { CKEditor } from "@ckeditor/ckeditor5-vue";

如果使用的是<script setup>语法，解构后可直接在模板中使用；若为普通选项式API，需在components选项中注册CKEditor。

方式二：全局注册插件（适合多组件使用场景） #

在项目入口文件（如main.js）中全局注册CKEditor插件：

import { createApp } from 'vue'
import App from './App.vue'
import CKEditor from '@ckeditor/ckeditor5-vue'

const app = createApp(App)
app.use(CKEditor)
app.mount('#app')

全局注册后，所有组件无需单独导入CKEditor，仅需导入ClassicEditor即可使用。

另外需注意：

1. 确保组件中已正确导入ref（从vue包）
2. 如果是选项式API，需在setup中返回text、config、ClassicEditor等变量，供模板使用

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