wangEditor出现初始化编辑器时候未传⼊任何参数，请查阅⽂档wangEditor出现初始化编辑器时候未传⼊任何参数，请查阅⽂档
背景：vue+elementUI，在弹出框页⾯中使⽤富⽂本编辑器，⽗页⾯和弹出框是分离页⾯，⽗页⾯import弹出框页⾯，在⽗页⾯初始化页⾯时，没有初始化富⽂本编辑器，所以在点击弹出框页⾯时，富⽂本编辑器尚未初始化
问题：如上图，
解决：⼦页⾯监听⽗页⾯传参变化，并做初始化
1、⽗页⾯代码
<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="cre ateTaskVisible">创建任务</el-button>
</el-col>
</el-row>
<!-- 创建任务公共弹出框 -->
<create-task-modal ref="createTaskModal" :title="title" :visible.sync="showCreateTaskModal" :psaving="createTaskloading" v-on:modalSubmit="modalS ubmitParent"></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();
asp富文本编辑器
},
methods: {
// 创建任务
createTask() {
this.showCreateTaskModal = true;
this.title = this.$t("ateTask");
},
// 创建任务弹出框确定保存操作
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="fal se" :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" ></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>
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.$setFields();
}
this.clientUser = [];
ark = null;
this.assign.ids = [];
this.$refs.upload.clearFiles();
this.func.initEditor();
});
},
initEditor() {
this.editor = new E(this.$refs.editor);
this.us = ["head", "bold", "italic", "underline", "foreColor", "backColor", "link", "list", "justify", "quote", "table", "code", "undo", "red o"];
this.hange = html => {
ark = html;
};
ate();
},
// 取消操作
modalClose() {
this.$emit("update:visible", false); // 直接修改⽗组件属性
}
},
props: {
visible: {
type: Boolean,
default: false
},
title: {
default: ""
}
}
};
</script>
<style lang="scss">
.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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。