首次操作不加载富文本组件-新增或修改有富文本属性

[kerwinguo]

问题描述: 添加或修改带富文本属性的数据首次的时候编辑器无法加载出来,第二次以后点击新增或者修改以后就都可以正常显示;

操作描述: 我现在有个数据的字段是富文本,那么就想在添加或者修改时候把富文本工具加载出来; 大体思路,一开始考虑是页面加载的时候就加载编辑器组件,但是因为绑定的元素在弹窗dialog里,未点击添加或者修改的时候是不存在的;所以就想在beforeToAdd,beforeToEdit里去初始化化编辑器;

首次进入这个页面,点击新增或者修改,都无法加载编辑器;第二次以后操作新增或者修改就可以正常打开编辑器;怀疑是否首次编辑器还未加载好,想用$nexttick处理,奈何不太会操作;特此请教

详细代码如下:

<!--表单组件-->
    <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="900px">
      <el-form ref="form" :model="form" :rules="rules" size="small" label-width="100px">
        <el-form-item label="标题">
          <el-input v-model="form.title" style="width: 690px;" />
        </el-form-item>
        <!-- <el-form-item label="类型">
          <el-select v-model="form.type" filterable placeholder="请选择">
            <el-option
              v-for="item in dict.user_status"
              :key="item.id"
              :label="item.label"
              :value="item.value" />
          </el-select>
        </el-form-item> -->
        <el-form-item label="内容">
          <div id="editorDiv" style="width: 690px;" />
        </el-form-item>
        <el-form-item label="C端还是B端">
          <el-select v-model="form.clientType" filterable placeholder="请选择">
            <el-option
              v-for="item in dict.client_type"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="排序">
          <el-input v-model="form.sortNo" style="width: 690px;" />
        </el-form-item> -->
        <el-form-item label="状态">
          <el-radio v-for="item in dict.dict_status" :key="item.id" v-model="form.status" :label="Number(item.value)">{{ item.label }}</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="crud.cancelCU">取消</el-button>
        <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
      </div>
    </el-dialog>

methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return true
    },
    [CRUD.HOOK.beforeToAdd]() {
      this.initEdit()
      return true
    },
    [CRUD.HOOK.beforeToEdit]() {
      this.$nextTick(() => {
        this.initEdit()
      });
      return true
    },
    initEdit() {
      const _this = this
      _this.editor = null
      _this.editor = new E('#editorDiv')
      // 自定义菜单配置
      _this.editor.customConfig.zIndex = 10
      // 文件上传
      _this.editor.customConfig.customUploadImg = function(files, insert) {
        // files 是 input 中选中的文件列表
        // insert 是获取图片 url 后，插入到编辑器的方法
        files.forEach(image => {
          upload(_this.imagesUploadApi, image).then(res => {
            const data = res.data
            const url = _this.baseApi + '/file/' + data.type + '/' + data.realName
            insert(url)
          })
        })
      }
      _this.editor.customConfig.onchange = (html) => {
        this.form.content = html
      }
      _this.editor.create()
      // 初始化数据
      _this.editor.txt.html(this.form.content ? this.form.content : '')
    }
  }