解决办法:wangeditor报错:this.editor.txt.html 显示‘txt’ undefined未定义,Cannot read property ‘txt‘ of undefined

一、最近在项目上用了wangeditor富文本编辑器,可以正常输入编辑。但是在对数据进行回显到编辑器的时候报错了,显示Cannot read property ‘txt’ of undefined
搞了好久,一直以为是不是自己没导入啥依赖,但事实不是是因为自己没有正确创建编辑器editor实例所以它无法调用自己原本的方法txt。

二、报错原因创建editor实例获取后端数据回显数据这个三个方法的顺序搞错了

三、正确顺序
-1、在created(){} 中先获取后端数据然后回显数据
-2、在mounted(){}创建editor实例

比如:

<template>
..........省略....
</template>

<script>
export default {

  editor: null,  //全局定义实例,方便各个方法内都可调用

  data () {
    return {
    //大家根据自己情况写
    }
  },
  created () {
      //第一步、调用方法做数据回显
      this.getArticleInfo()
    }
  },


  mounted () {
    this.int_wangeditor(); //第三步、创建编辑器
  },

  methods: {
    int_wangeditor () {
      this.editor = this.$wangeditor('#article_content')  //article_content为html中绑定的编辑器id,大家根据自己情况改
      //编辑器里面的内容,监听内容有变化就修改要提交的值
      this.editor.config.onchange = (html) => {
        this.article.description = html  //看自身情况改
      }
      //创建编辑器
      this.editor.create()
    },

    createData () { // 编辑器数据回显方法
      this.editor.txt.html(this.article.description) // 向富文本中插入回显的数据
    },

    //获取后台数据
    getArticleInfo (articleId) {
      articleApi.getArticleInfo(articleId)
        .then(response => { 
          this.article = response.data.data.articleInfo
          this.createData()  //第二步、对编辑器内容进行回显
        })
    }
  }
}
</script>

最后大家可以看一下这个链接,就懂为啥这样写了。
链接:https://segmentfault.com/q/1010000017354202

感谢链接上的大哥们!!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

AKA小徐

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值