表单设计:

<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函数就解决了

 

转载于:https://www.cnblogs.com/purple-windbells/p/11243606.html

Logo

前往低代码交流专区

更多推荐