vue3将wangeditor富文本封装成组件，调用时怎么获取其中的内容

在Vue 3中将WangEditor富文本编辑器封装成一个组件，并在调用时获取其中的内容，可以通过以下步骤实现：

1. 安装WangEditor：首先需要安装WangEditor库，可以通过npm或yarn进行安装：

   npm install @wangeditor/editor --save
   # 或者
   yarn add @wangeditor/editor

2. 创建WangEditor组件：创建一个.vue文件，比如`WangEditor.vue`，然后引入并使用WangEditor：

   <template>
     <div ref="editorContainer" class="w-e-text-container" />
   </template>

   <script>
   import { ref, onMounted, onBeforeUnmount } from 'vue';
   import wangEditor from '@wangeditor/editor';

   export default {
     name: 'WangEditor',
     props: {
       value: {
         type: String,
         default: ''
       }
     },
     setup(props, { emit }) {
       const editorContainer = ref(null);
       let editor;

       onMounted(() => {
         // 初始化编辑器
         editor = new wangEditor(editorContainer.value);
         // 设置编辑器内容
         editor.config.onchange = (newHtml) => {
           emit('update:value', newHtml);
         };
         editor.create();
         // 设置组件初始内容
         editor.txt.html(props.value);
       });

       onBeforeUnmount(() => {
         // 销毁编辑器，避免内存泄漏
         editor.destroy();
         editor = null;
       });

       return {
         editorContainer
       };
     }
   };
   </script>

   <style>
   /* 样式根据需要进行调整 */
   .w-e-text-container {
     height: 300px; /* 或者其他合适的高度 */
   }
   </style>

3. 在父组件中使用WangEditor组件并获取内容：

   <template>
     <wang-editor v-model:value="content" />
     <button @click="getContent">获取内容</button>
   </template>

   <script>
   import WangEditor from './WangEditor.vue';

   export default {
     components: {
       WangEditor
     },
     data() {
       return {
         content: '' // 使用v-model绑定内容
       };
     },
     methods: {
       getContent() {
         console.log(this.content); // 这里可以获取到编辑器中的内容
       }
     }
   };
   </script>

4. 在子组件中，我们使用了`v-model:value`与父组件进行双向数据绑定，这样父组件可以直接获取到编辑器中的内容。