表单设计:
<el-form-item label="内容" label-width="150px">
<div ref="editor" style="text-align:left;margin: 5px;width: 800px"> </div>
</el-form-item>
//富文本编辑框
updated(){
var editor = new E(this.$refs.editor)
editor.customConfig.uploadImgShowBase64 = true // 使用 base64 保存图片
// 不可修改
editor.customConfig.uploadImgHeaders = this.headers
// 自定义文件名,不可修改,修改后会上传失败
editor.customConfig.uploadFileName = 'file'
editor.customConfig.uploadImgServer = this.imagesUploadApi // 上传图片到服务器
editor.customConfig.onchange = (html) => {
this.form.content= html
}
// var isAdd=this.$route.query.isAdd
// console.log(isAdd)
//初始化编辑框
editor.create()
//如果是编辑的页面将内容传到富文本框中
editor.txt.html(this.form.content)
// }
},
刚开始我用的是created函数,但是点击编辑之后,原本内容里面的数据并没有呈现在编辑的富文本框里,后来将created函数换为类updated函数就可以实现了
原因:在vue的生命周期中,created存在于dom元素未渲染之前,mounted存在于dom元素渲染之后,但是表单内容还是最初时候初始化的时候,而updated则存在于所有数据更新之后,
所以若想要将编辑页面内容传到富文本中
editor.txt.html(this.form.content)
前提是this.form.content是有数据的,即使用updated函数就解决了
所有评论(0)