在el-dialog标签上添加wangeditor富文本编辑器

项目场景：

在帮老师写系统的时候遇到要在el-dialog上面加一个富文本编辑器，1个晚上+1个早上，终于学会了怎么用，泪目。

我实现了仓库数据显示到富文本编辑器。

实现效果：

这里描述项目中遇到的问题：
遇到了一个问题，就是要点击按钮两次才能渲染出后端的数据。
后面换了一下思维，数据绑定不在modify按钮，而在el-dialog的show事件

<template>
          <el-button type="text" @click="modify" >修改课程计划</el-button>
          <el-dialog title="请输入新的课程计划" :visible.sync="dialogFormVisible_" @opened="show()"  @closed="hide()"  :before-close="handleClose">
                <div id="editorElem" style="margin: 0% 4% 3% 2%;">
                  <p>欢迎使用 wangEditor 富文本编辑器</p>
                </div>
            <div slot="footer" class="dialog-footer">
              <el-button @click=" dialogFormVisible_ = false ">取 消</el-button>
              <el-button type="primary"  @click="modifyplan">确 定</el-button>
            </div>
          </el-dialog>
</template>

注：this.getPlan.plan为我读取仓库的数据

 methods: {
     // 点击修改计划
   modify () {
      this.dialogFormVisible_ = true
    },
    // 确定修改课程计划
    modifyplan () {
      this.dialogFormVisible_ = false
      // 把富文本的数据存到仓库里面
      this.getPlan.plan = this.editor.txt.html()
      // alert(this.editor.txt.html())
      // 提交修改/富文本！！！
    },
        // 对编辑器进行加载
    show () {
      var editor = new E('#editorElem')
      this.editor = editor
      // 配置菜单栏，删减菜单，调整顺序
      editor.config.menus = [
        'head', // 标题
        'bold', // 粗体
        'fontSize', // 字号
        'fontName', // 字体
        'italic', // 斜体
        'underline', // 下划线
        'strikeThrough', // 删除线
        'foreColor', // 文字颜色
        'backColor', // 背景颜色
        'justify', // 对齐方式
        'undo', // 撤销
        'redo' // 重复
      ]
      editor.create()
      this.editor.txt.html(this.getPlan.plan)
    },
    // 关闭时清空数据避免重叠
    hide () {
      this.editor.txt.html(this.getPlan.plan)
    }
 }