wangEditor出现初始化编辑器时候未传入任何参数,请查阅文档

wangEditor出现初始化编辑器时候未传入任何参数,请查阅文档

背景：vue+elementUI，在弹出框页面中使用富文本编辑器，父页面和弹出框是分离页面，父页面import弹出框页面，在父页面初始化页面时，没有初始化富文本编辑器，所以在点击弹出框页面时，富文本编辑器尚未初始化
问题：如上图，
解决：子页面监听父页面传参变化，并做初始化
1、父页面代码

<template>
  <div>
    <el-row class="action-row">
      <el-col :span="12">
        <el-button type="primary" v-hascode="'declare.booking:createTask'" @click="createTask" size="medium" :loading="createTaskloading" :disabled="createTaskVisible">创建任务</el-button>
      </el-col>
    </el-row>

    <!-- 创建任务公共弹出框 -->
    <create-task-modal ref="createTaskModal" :title="title" :visible.sync="showCreateTaskModal" :psaving="createTaskloading" v-on:modalSubmit="modalSubmitParent"></create-task-modal>
  </div>
</template>

<script>
import CreateTaskModal from "../../common/createTaskModal";

export default {
  name: "BookingBasicInfo",
  components: {
    "create-task-modal": CreateTaskModal
  },
  data() {
    return {
      title: '',
      showCreateTaskModal: false, // 新增任务弹出框显示标识：默认不显示
      createTaskloading: false,
    };
  },
  created: function() {
    this.initData();
  },
  methods: {
    // 创建任务
    createTask() {
      this.showCreateTaskModal = true;
      this.title = this.$t("booking.createTask");
    },
    // 创建任务弹出框确定保存操作
    modalSubmitParent(file, docNo) {
    	console.log('----------保存操作')
    },
  },
};
</script>

2、子页面弹出框代码

<template>
  <!-- 创建任务 -->
  <el-dialog :title="title" class="full-mask" :visible.sync="visible" width="670px" :before-close="modalClose" :append-to-body="true" :close-on-click-modal="false" :close-on-press-escape="false">
    <el-form :model="assign" ref="assign" :rules="rules" label-width="120px" label-position="center" size="small" class="assign-form">
      <el-form-item :label="备注">
        <div ref="editor" style="text-align:left; height: 200px"></div>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="modalClose">{{$t('com.cancel')}}</el-button>
      <el-button type="primary" @click="addTask" :loading="saving">{{$t('com.ok')}}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import E from "wangeditor";

export default {
  name: "CreateTaskModal",
  data() {
    return {
      func: {
        initEditor: null
      },
      editor: null
    };
  },
  watch: { // 监听
    visible(val) {
      if (val) {
        this.initDispatch();
        this.editor.clear();
      }
    }
  },
  created: function() {
    this.func.initEditor = this.$_.once(this.initEditor);
  },
  methods: {
    addTask() {},
    initDispatch() {
      this.$nextTick(() => {
        if (undefined != this.$refs.assign) {
          this.$refs.assign.resetFields();
        }
        this.clientUser = [];
        this.assign.remark = null;
        this.assign.ids = [];
        this.$refs.upload.clearFiles();
        this.func.initEditor();
      });
    },
    initEditor() {
      this.editor = new E(this.$refs.editor);
      this.editor.customConfig.menus = ["head", "bold", "italic", "underline", "foreColor", "backColor", "link", "list", "justify", "quote", "table", "code", "undo", "redo"];
      this.editor.customConfig.onchange = html => {
        this.assign.remark = html;
      };
      this.editor.create();
    },
    // 取消操作
    modalClose() {
      this.$emit("update:visible", false); // 直接修改父组件属性
    }
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      default: ""
    }
  }
};
</script>

<style lang="scss">
.file-doc {
  .el-upload-list--text {
    .el-upload-list__item {
      padding-left: 150px;
    }
  }
}

.file-type-select {
  width: 140px;
  position: relative;
  top: 38px;
  height: 26px;
  line-height: 32px;
  margin-top: 5px;
  z-index: 201;
}

.el-table a,
.el-table a:hover {
  color: rgb(59, 177, 156);
}

.assign-form {
  .el-form-item {
    width: 100%;
    .el-form-item__label {
      position: absolute;
    }
    .el-form-item__content {
      .el-select,
      .el-input {
        width: 100%;
      }
    }
  }
}
</style>