Vue + wangEditor 富文本编辑器,初始化时向文本框中插入内容失败

我想要实现一个编辑的操作,进入页面时从后台获取数据后将数据插入富文本框中,
数据请求到了,但用官方的方法 editor.txt.html()没能将数据插入到文本框中去。

下面是截图,还有代码:
红色箭头所指就是我请求到的数据,即想插入文本框中的数据,但是不知道为什么是空的
图片描述

代码

HTML中的代码

  <el-form :model="quizData" ref="testForm">
    <el-form-item label="题干" required>
      <br>
      <div ref="editor" style="text-align:left"></div>
      {{this.quizData.quizTitle}}
    </el-form-item>
 </el-form>

数据请求在create中

created () {
  this.getQuizInfo()

 //getQuizInfo()在methods中
  getQuizInfo () {
    quizInfo().then(res=>{
      this.quizData = res.data
    })
  },
},

quizData的数据结构

 quizData:{
    "quizId": 0,
    quizTitle: "",
    quizType: 0,   
    "updateTime": "2018-11-28T03:10:25.082Z",
},

文本框初始化在mounted中

mounted() {
  var editor = new E(this.$refs.editor)
  editor.customConfig.onchange = (html) =>{
    console.log(html)
    this.quizData.quizTitle = html
  }
  editor.customConfig.menus = [
    'head',  // 标题
  ]
  editor.create()
  editor.txt.html(this.quizData.quizTitle)
},
阅读 2.7k
评论
    3 个回答

    @依韵_宵音 思路方法很正确,还有一种解决办法:

    mounted中初始化editor时,使用this.editor,且在此处不做赋值editor.txt.html(this.quizData.quizTitle)

    mounted() {
      this.editor = new E(this.$refs.editor)
      this.editor.customConfig.onchange = (html) =>{
        console.log(html)
        this.quizData.quizTitle = html
      }
      this.editor.customConfig.menus = [
        'head',  // 标题
      ]
      this.editor.create()
    },

    这样的话,在methods中,可以灵活使用使用this.editor的赋值this.editor.txt.html()、清空this.editor.txt.clear()等操作。

    //在methods中
      getQuizInfo () {
        quizInfo().then(res=>{
          this.quizData = res.data
          this.editor.txt.html(this.quizData.quizTitle)   
          //或 this.editor.txt.html(this.res.data.quizTitle) 
        })
      },