vue3 ckeditor赋值困难

如果你在 Vue3 中使用 CKEditor 时遇到了赋值困难，可能是由于 CKEditor 在 Vue3 中没有正确地与 v-model 指令集成所导致的。下面是一个可能的解决方案：

1. 使用 Vue3 的自定义指令来手动绑定 CKEditor 实例：

// main.js
import { createApp } from 'vue';
import CKEditor from '@ckeditor/ckeditor5-vue3';

createApp(App)
  .use(CKEditor)
  .mount('#app');

<!-- 在组件中使用 -->
<ckeditor v-model="content" :editor="editor"></ckeditor>

2. 将 CKEditor 实例作为 props 传递到组件中：

<!-- 在父组件中 -->
<template>
  <child-component :editor="editor"></child-component>
</template>

<script>
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

export default {
  data: () => ({
    editor: ClassicEditor,
    content: '',
  }),
};
</script>

<!-- 在子组件中 -->
<template>
  <ckeditor v-model="content" :editor="editor"></ckeditor>
</template>

<script>
export default {
  props: {
    editor: {
      type: Object,
      required: true,
    },
  },
  data: () => ({
    content: '',
  }),
};
</script>

这样可以确保 CKEditor 实例正确地绑定到组件中，并且在 v-model 中正确地传递和接收值。