关于vue.js使用wangEditor3 基本设置和内容修改问题

由于项目中使用到了富文本编辑器，我刚好遇到了一系列的问题，编辑富文本的时候，出现富文本内容不能回显的问题，那说一下我的解决办法。

初次使用富文本是先安装富文本的插件：npm install wangeditor

官方文档https://www.kancloud.cn/wangfupeng/wangeditor3/335774，写的很简单，不过要仔细阅读。

<template>
    <div>
        <div ref="editor" style="text-align:left"></div>
        <button v-on:click="getContent">查看内容</button>
    </div>
</template>
 
<script>
    import E from 'wangeditor'
 
    export default {
      name: 'editor',
      data () {
        return {
          editorContent: ''
        }
      },
      methods: {
        getContent: function () {
            alert(this.editorContent)
        }
      },
      mounted() {
        var editor = new E(this.$refs.editor)
        editor.customConfig.onchange = (html) => {
          this.editorContent = html
        }
        editor.create()
      }
    }
</script>
 
<style scoped>
</style>

但是在父组件的时候是不能回显的，我根据查找资料发现原来是异步加载的原因导致我的附文本框内容没能及时回显出来，这个时候就需要用到监听watch来加载。

<template>
  <div>
    <div ref="editor" style="text-align:left"></div>
  </div>
</template>
 
<script>
import E from "wangeditor";
 
export default {
  name: "editor",
  data() {
    return {
      editor:""
    };
  },
  props: {
    content: { required: true }
  },
  mounted(){
    this.editor = new E(this.$refs.editor);
    
    this.editor.customConfig.onchange = html => {
 
      this.$emit('catchData',html);
 
    };
    // 配置服务器端地址
    this.editor.customConfig.uploadImgServer = "/Upload.php";
    //自定义一个图片参数名
    this.editor.customConfig.uploadFileName = "filename";
    // 将图片大小限制为 3M
    this.editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
 
    this.editor.create();
  },
  watch: {
     content: function(val) {
      this.editor.txt.html(val);
    }
  }
};
</script>
 
<style scoped>
</style>

原文链接：https://blog.csdn.net/u010585474/article/details/91555386