共被编辑 3 次

版本 更新时间 贡献者 编辑原因 操作
#r3 2018年12月13日 北堂棣4501 更新问题 查看

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)
},
#r2 2018年12月12日 ZONE_98F264 更新问题 查看

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

我想要实现一个编辑的操作,进入页面时从后台获取数据后将数据插入富文本框中,
数据请求到了,但用官方的方法 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)
},
#r1 2018年12月12日 ZONE_98F264 创建问题 查看

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

我想要实现一个编辑的操作,进入页面时从后台获取数据后将数据插入富文本框中,
数据请求到了,但用官方的方法 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)
},