一、最近在项目上用了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
感谢链接上的大哥们！！
