关于vue.js使用wangEditor3 基本设置和内容修改等一系列坑爹问题的解决方法

最近做项目需要用富文本编译器，上次使用的tinymce把我坑了一通，这次换了个更坑爹的Wangeditor。我要说的内容就是自己踩到的坑和解决方法。

首先要安装插件:npm install wangeditor

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

按照官方文档的指示（里面还有vuejs的demo（伪）真好），进行配置，大概就是这样

制作了一个富文本编辑器的组件，但是没有本地上传，放到项目上也没法获取到里面的内容，中看不中用。那么只好自己动手丰衣足食了，开始进行修改。

先解决本地上传图片问题，这个简单，文档是有写的很清楚。

      // 配置服务器端地址
      editor.customConfig.uploadImgServer = "/upload.php";
      //自定义一个参数名
      editor.customConfig.uploadFileName = "filename";
      // 将图片大小限制为 3M
      editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;

加入这三句话以后问题迎刃而解。

第二问题父组件获取不到内容，那就做一个子组件和父组件相互传值的功能。

//父组件中：
//引入子组件
import WangEditor from "@/components/common/WangEditor";
//注册组件
comonents:{
    WangEditor
}
//使用组件

//接收参数
 methods: {
    catchData(value){
      this.content=value      //在这里接受子组件传过来的参数，赋值给data里的参数
    },
}

问题出在子组件上，怎么把内容传到父组件中。这个也不难的。

//子组件中：
 editor.customConfig.onchange = html => {
        //把获取的内容传给父组件
        this.$emit('catchData',html);
 };

这样一个编辑功能就完成了，但是还没有完，编辑错了肯定要修改的，怎么办？

接下来是重点（敲黑板，duang，duang，duang）

首先要把父组件的值传给子组件

//父组件

//子组件
 props: {
    content:{required:true}
  },

//文档上说了一个初始化内容的方法
editor.txt.html("内容");

//合理修改
editor.create();
//放在上面那句话之后这个要注意。
editor.txt.html(this.content);

但是把这句话写进去后什么都没发生。假文档？？但是刷新后出现了 。。。我？？？

经研究发现，先加载的编辑器后加载的数据结果导致数据没写进去。坑爹的异步加载。。这个异步加载把我折腾的很惨，到网上找文档，没有一个靠谱的，闹得我想骂娘。苦水吐到这里，开始解决问题。

解决方法就是通过watch监听来完成的。上代码。把一开始的 进行修改后的终极代码

这样就ok了。原理很简单就是把变量声明成全局变量，然后监听加载

最后一个问题，这个编译器放在手机端上看的时候会炸窝，解决方法有两种。

第一种，在全局样式中添加

.w-e-toolbar {
  flex-wrap: wrap;
}

第二种修改js源文件 wangEditor.js中的4661行，加上 flex-wrap: wrap;就好了。

以上就是我踩得的坑以及解决方法。谢谢大家支持。