vue3的setup语法糖简单封装ckediter

要在Vue中使用CKEditor，首先需要安装CKEditor。可以通过以下方式安装CKEditor：

1. 在命令行中运行以下命令：

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

2. 在man.ts中导入CKEditor并注册CKEditor Vue组件：

   import CKEditor from '@ckeditor/ckeditor5-vue';
   
   const app = createApp(App);
   app.use(CKEditor);
   app.mount('#app', true);
   

3. 创建Vue富文本组件：

   <template>
     <div>
       <ckeditor
         :editor="editor"
         :config="editorConfig"
         v-model="editorData"
       ></ckeditor>
     </div>
   </template>
   

4. 在Vue组件的data属性中定义CKEditor配置和编辑器数据：

   <script lang="ts" setup>
   import { ref, reactive, computed, onMounted } from 'vue';
   import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
   
   const editor = ClassicEditor;
   
   const editorConfig = reactive({
     language: 'zh-cn',
   
   // 配置工具栏
     toolbar: {
       items: [
         'heading',
         '|',
         'bold',
         'italic',
         'bulletedList',
         'numberedList',
         '|',
         'outdent',
         'indent',
         '|',
         'blockQuote',
       ],
     },
   });
   
   const data = ref();
   const getData = () => {
     return data.value;
   };
   const setData = (message: any) => {
     data.value = message;
   };
   // 对外暴露get，set方法
   defineExpose({
     getData,
     setData,
   });
   </script>
   

这样就可以在Vue中使用CKEditor并进行配置，以及获取和设置编辑器的内容。