ckeditor5 vue3 ts 使用

CKEditor 5是一个强大的富文本编辑器，而Vue 3是构建用户界面的前端框架。如果你想在Vue 3项目中使用CKEditor 5并结合TypeScript（TS），你可以按照以下步骤操作：

1. **安装依赖**:
- 首先，在你的Vue 3项目里安装`@ckeditor/ckeditor5-build-classic`和`vue-class-component` (用于TS支持)。在`package.json`中添加：

     npm install @ckeditor/ckeditor5-build-classic vue-class-component --save

2. **配置Vue组件**:
- 创建一个新的`.ts`文件，例如` CKEditor.vue`，然后导入相关模块，并设置组件：

     import Vue from 'vue';
     import Editor from '@ckeditor/ckeditor5-build-classic/src/classic';
     import { Component } from 'vue-class-component';

     @Component({
       components: {
         CKEditor: Editor,
       },
       props: {
         initialContent: {
           type: String,
           default: '',
         },
       },
     })
     export default class CKEditorComponent extends Vue {
       editor: any;

       mounted() {
         this.editor = ClassicEditor.create(this.$refs.editor, {
           // 配置选项
         });
       }
     }

3. **在模板中使用**:
- 在你的Vue组件模板中，像这样引用和初始化编辑器：

     <div ref="editor">
       <ckeditor :initial-content="initialContent" />
     </div>

4. ** TypeScript 类型提示**:
- 如果需要，可以为组件属性提供类型注解，例如`initialContent`，以便IDE提供更好的代码提示。