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出现初始化编辑器时候未传入任何参数,请查阅文档相关推荐

错误：初始化编辑器时候未传入任何参数，请查阅文档
VUE的一个小组件 <template><div class="editor" style="height:100%"><div ...
ORACLE初始化参数文件详细文档
注明:本文不是介绍ORACLE初始化参数的具体配置及调优,本文仅介绍初始化参数配置文件PFILE和SPFILE的使用及相关内容说明. 1.简介在9i之前,参数文件只有一种,它是文本格式的,称为pfi ...
c++ 传入动态参数_一文了解Mybatis中动态SQL的实现
一.动态SQL简介 MyBatis的强大特性之一便是它的动态 SQL.如果你有使用 JDBC 或其他类似框架的经验,你就能体会到根据不同条件拼接 SQL 语句有多么痛苦.拼接的时候要确保不能忘了必要的 ...
excel未保存强制关闭计算机,excel文档未保存关闭的恢复方法
导语:excel文档未保存关闭如何恢复呢?我相信大多数人都会遇到在编辑excel时还没保存,就不小心关闭了,大家都会很着急,今天小编给大家介绍excel文档未保存关闭恢复的方法. 在Excel2010 ...
这款即将开源的编辑器可能是最适合程序员的文档工具！
作为程序员,我经常需要写技术文档,之前也用过很多文档工具,比如有道云笔记,石墨,腾讯文档等. 我感觉他们大同小异,无外乎是文档编写.分享.协作这些功能,就像Word的简化版和在线版. 朋友曾经给我多次 ...
linux麒麟编码方式,麒麟Linux系统vi文本编辑器介绍（24页）-原创力文档
中标麒麟Linux服务器操作系统培训系列中标麒麟Linux系统vi文本编辑器介绍技术创新,变革未来本章目标 • vi 和vim 的三种主要模式 • vi 的基本使用 vi •vi是一种广泛存在于 ...
自定义事件（如未作说明，本博客文档都是用C#代码）
1//定义代理 2public delegate void ConnectionErrorDelegate(ConnectionStatus status, string msg); 3//定义 ...
将百度富文本编辑器(ueditor)中的内容转化为word文档格式
业务场景需求:根据富文本中的内容生成对应的word文档进行预览和下载功能. 实现: 采用 POIFSFileSystem 类相关实现,能够准确的将文字.格式相关内容转换成功,但是对于在线的网络图片, ...
word关闭未响应_如何实现Word文档中的引号变成对的中文引号
我们在WORD排版过程中经常会遇到引号的麻烦,比如文档主体字体是微软雅黑或者其他字体,引号可能呈现出来是英文引号的样子,对文档美观有很大的影响,另外一种情况是引号缺失,我们可以采用宏命令解决这个问题, ...

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

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

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

最新文章

热门文章