怎么说呢，最近在做公司的官网，文章管理这一块需要用到富文本编辑器，自己试了几个市面上比较火的编辑器感觉效果都不是太理想，最后感觉这个wangEditor还不错，就参照着官网和百度上的资料自己写了一个组件。

这是效果图

话不多说上代码

	子组件的代码 这里重要的都加了注解 

<template>
  <div id="wangeditor">
    <div ref="editorElem" style="text-align:left"></div>
  </div>
</template>
<script>
  import E from 'wangeditor'
  import {uploadfwb} from "@/api/website/testfwb";
  export default {
    name: 'editorElem',
    data () {
      return {
        editor: null,
        editorContent: ''
      }
    },
    props: ['catchData', 'content'],    // 接收父组件的方法
    watch: {
      content () {
        if(!this.content){      //这是为了解决输入时光标乱跳
          this.editor.txt.html(this.content);
        }
      }
    },
    mounted () {
      this.editor = new E(this.$refs.editorElem)
      this.editor.customConfig.onchange = (html) => {
        this.editorContent = html
        this.catchData(this.editorContent)  // 把这个html通过catchData的方法传入父组件
      }
      this.editor.customConfig.menus = [          // 菜单配置
        'head',  // 标题
        'bold',  // 粗体
        'fontSize',  // 字号
        'fontName',  // 字体
        'italic',  // 斜体
        'underline',  // 下划线
        'strikeThrough',  // 删除线
        'foreColor',  // 文字颜色
        'backColor',  // 背景颜色
        'link',  // 插入链接
        'list',  // 列表
        'justify',  // 对齐方式
        'quote',  // 引用
        'emoticon',  // 表情
        'image',  // 插入图片
        'table',  // 表格
        'code',  // 插入代码
        'undo',  // 撤销
        'redo'  // 重复
      ]
      this.editor.customConfig.customUploadImg = function(files, insert) {
        var formData = new FormData();
        for(var i = 0;i < files.length;i ++) {
          formData.append("fwbfiles", files[i]);
        }
        uploadfwb(formData).then(response => {
          for(var j=0;j<response.data.length;j++){
            insert(process.env.VUE_APP_BASE_API + response.data[j]);
          }
        });
      };
      this.editor.customConfig.uploadImgMaxSize = 5 * 1024 * 1024;  // 将图片大小限制为 3M
      this.editor.customConfig.uploadImgMaxLength = 8;  // 限制一次最多上传 5 张图片
      this.editor.create()     // 创建富文本实例
      this.editor.txt.html(this.content);
    }
  }
</script>
<style lang="scss" rel="stylesheet/scss">
  .w-e-text-container{
    height: 700px !important;/*!important是重点，因为原div是行内样式设置的高度300px*/
  }
</style>

	父组件的代码

import editor from "./../testfwb/index";

<editor :catchData="catchData" :content="form.content"/>

data() {
    return {
      form: {
        content: ''
      }
    };
  },
methods: {
	catchData(content) {
      /*console.log( content)*/
      this.form.content = content;
    }
}

关于图片上传我是用的对我来说最方便的办法，实现了多图上传，这个博客主要写前后台数据同步，重点不在图片上传，写的不好大家多多指教