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>
更多推荐
wangEditor出现初始化编辑器时候未传入任何参数,请查阅文档
发布评论