el-dialog 中使用wangeditor

在 el-dialog 中使用 wangeditor 可以通过以下步骤来实现：

1. 首先，在你的项目中安装 wangeditor。你可以使用 npm 或者 yarn 进行安装：

npm install wangeditor --save

2. 在需要使用 wangeditor 的地方，引入相关的样式和脚本文件。你可以在 HTML 文件中添加以下代码：

<link rel="stylesheet" href="./node_modules/wangeditor/release/wangEditor.css">
<script src="./node_modules/wangeditor/release/wangEditor.min.js"></script>

3. 在 el-dialog 的弹窗内容中创建一个元素，用于初始化 wangeditor 编辑器：

<template>
  <el-dialog title="编辑器弹窗" :visible.sync="dialogVisible">
    <div class="editor-container" ref="editor"></div>
  </el-dialog>
</template>

<style>
  .editor-container {
    height: 300px;
  }
</style>

4. 在 Vue 组件的 mounted 钩子函数中初始化 wangeditor 编辑器并设置相应的配置项：

<script>
  export default {
    data() {
      return {
        dialogVisible: false,
        editor: null
      };
    },
    mounted() {
      this.editor = new wangEditor(this.$refs.editor); // 初始化编辑器
      this.editor.create(); // 创建编辑器

      // 可根据需要进行其他的配置，比如自定义菜单、设置上传图片接口等
      // this.editor.customConfig.menus = [...];
      // this.editor.customConfig.uploadImgServer = '...';
    }
  };
</script>

现在，你就可以在 el-dialog 中使用 wangeditor 编辑器了。记得根据实际需求，自定义编辑器的配置项和样式。