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

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

首先要安装插件:npm install wangeditor

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

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

<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>

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

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

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

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

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

//父组件中：
//引入子组件
import WangEditor from "@/components/common/WangEditor";
//注册组件
comonents:{
    WangEditor
}
//使用组件
<WangEditor :catchData="catchData"></WangEditor>
//接收参数
 methods: {
    catchData(value){
      this.content=value      //在这里接受子组件传过来的参数，赋值给data里的参数
    },
}

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

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

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

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

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

//父组件
<WangEditor :catchData="catchData" v-bind:content="content"></WangEditor>
//子组件
 props: {
    content:{required:true}
  },

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

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

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

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

解决方法就是通过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>

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

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

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

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

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

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