vue3 wangEditor 传参预览

Vue3 中使用 WangEditor 预览功能通常涉及到将编辑的内容传递给组件的子组件或者通过 props 进行通信。以下是基本步骤：

1. **安装WangEditor**: 首先需要安装wangEditor插件，可以使用npm或yarn进行安装：

   npm install @wangeditor/editor --save

2. **引入并初始化编辑器**:
在组件中导入WangEditor，并在模板上创建编辑器实例，可以绑定到一个变量：

   <template>
     <div ref="editor">
       <wang-editor :value="content" v-model="content"></wang-editor>
     </div>
   </template>

   <script setup>
   import { ref } from 'vue'
   import Editor from '@wangeditor/editor'

   const editorRef = ref(null)
   let content = '' // 初始化内容

   const initEditor = async () => {
     await Editor.create(editorRef.value, {
       initialContent: content,
       // 其他配置选项...
     })
   }
   </script>

3. **设置预览功能**:
可以创建一个按钮或者其他触发事件的方式，当用户完成编辑后点击预览，将`content`传递给预览组件或API进行渲染：

   <button @click="previewContent">预览</button>
   
   <script setup>
   const previewContent = async () => {
     // 将编辑器内容发送到预览组件或服务器
     // 示例：
     const result = await yourPreviewFunction(content);
     // 更新预览部分的显示
   }
   </script>

4. **预览组件接收内容**:
如果你有单独的预览组件，可以在该组件中接收到内容并渲染它。