首次操作不加载富文本组件-新增或修改有富文本属性
kerwinguo opened this issue · comments
Justdomoon commented
问题描述:
添加或修改带富文本属性的数据首次的时候编辑器无法加载出来,第二次以后点击新增或者修改以后就都可以正常显示;
操作描述:
我现在有个数据的字段是富文本,那么就想在添加或者修改时候把富文本工具加载出来;
大体思路,一开始考虑是页面加载的时候就加载编辑器组件,但是因为绑定的元素在弹窗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 : '')
}
}
elunez commented
已更新为WangEditor5