Forms Design:
<el-form-item label="内容" label-width="150px"> <div ref="editor" style="text-align:left;margin: 5px;width: 800px"> </div> </el-form-item>
// rich text edit box Updated () { var = new new Editor E (the this. $ Refs.editor) editor.customConfig.uploadImgShowBase64 = // use base64 to save the image to true // can not modify editor.customConfig.uploadImgHeaders = this.headers / / custom file name can not be modified, the changes will upload failed editor.customConfig.uploadFileName = 'file' editor.customConfig.uploadImgServer = this.imagesUploadApi // upload pictures to the server editor.customConfig.onchange = (html) => { HTML = this.form.content } // = the this isAdd var. route.query.isAdd $ // the console.log (isAdd) // initialize the edit box editor.create () // if the contents are edited page spread rich text box editor.txt.html (this.form.content) //} },
At first I was created with function, but after clicking Edit, the original content inside the data is not presented in rich text box editor, and later changed to function will be created class updated function can be achieved
Cause: vue life cycle, created dom elements are not present before rendering, then mounted exists in dom element rendering, but still original form content initialization time, and updated after all the data is present in the update,
So if you want to edit the content of the page you want to spread the rich text
editor.txt.html (this.form.content)
provided that this.form.content there is data that the use of updated function solved