CKEditor 5 不适用于 Vue 3 Composition API

Question

我尝试在本地使用 CKEditor 和 vue 3 组合 api，但编辑器未显示在页面上 这里可能是组件

<template>
    <PageWrapper title="Post">
        <CKEditor :editor="editor"></CKEditor>
    </PageWrapper>
</template>


<script setup>
import PageWrapper from '@/components/PageWrapper.vue'
import CKEditor from '@ckeditor/ckeditor5-vue'
import ClassicEditor from '@ckeditor/ckeditor5-build-classic'

const editor = ClassicEditor
</script>

出了什么问题？

Answer 1

来自官方 文档非常简单，使用脚本设置，我发现它可以这样工作

    
    import CKEditor from '@ckeditor/ckeditor5-vue'
    import ClassicEditor from '@ckeditor/ckeditor5-build-classic'
    
    const editor = ClassicEditor
    const ckeditor = CKEditor.component

然后就可以正常使用模板中的组件了。

Answer 2

import ClassicEditor from '@ckeditor/ckeditor5-build-classic'
import {reactive}    from 'vue'

export default {
    setup() {
        let editor = reactive(ClassicEditor);
        return {editor}
    }
}

Answer 3

import CKEditor from '@ckeditor/ckeditor5-vue';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
export default {
  components: {
    ckeditor: CKEditor.component
  },
  data() {
    return {
      editor: ClassicEditor,
      editorConfig: {
        
      }
    }
  }

然后在模板内

  <ckeditor :editor="editor" v-model="youModel" :config="editorConfig"></ckeditor>

完美运行