CKEditor 5 与 Nuxt 3 - “组件缺少模板或渲染功能”

Question

我已经安装了依赖项：

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>

组件设置：

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>

当我使用所见即所得打开页面时，我收到警告：组件缺少模板或渲染功能。在 CKEditor 元素中。我做错了什么？

Answer 1

好吧，如果有人要搜索这个，我建议您自己创建 CKEditor 实例：

const editor = ref(null)
const ck = ref(null)
const init = () => {
    ck.value = ClassicEditor.create(editor.value)
}
onMounted(() => {
    init()
})

<template>
    <div class="w-full h-[400px]">
        <div class="w-full h-full" ref="editor"></div>
    </div>
</template>