Closed kerwinguo closed 1 year ago
问题描述: 添加或修改带富文本属性的数据首次的时候编辑器无法加载出来,第二次以后点击新增或者修改以后就都可以正常显示;
操作描述: 我现在有个数据的字段是富文本,那么就想在添加或者修改时候把富文本工具加载出来; 大体思路,一开始考虑是页面加载的时候就加载编辑器组件,但是因为绑定的元素在弹窗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 : '') } }
已更新为WangEditor5
问题描述: 添加或修改带富文本属性的数据首次的时候编辑器无法加载出来,第二次以后点击新增或者修改以后就都可以正常显示;
操作描述: 我现在有个数据的字段是富文本,那么就想在添加或者修改时候把富文本工具加载出来; 大体思路,一开始考虑是页面加载的时候就加载编辑器组件,但是因为绑定的元素在弹窗dialog里,未点击添加或者修改的时候是不存在的;所以就想在beforeToAdd,beforeToEdit里去初始化化编辑器;
首次进入这个页面,点击新增或者修改,都无法加载编辑器;第二次以后操作新增或者修改就可以正常打开编辑器;怀疑是否首次编辑器还未加载好,想用$nexttick处理,奈何不太会操作;特此请教
详细代码如下: