之前使用的富文本编辑器是quill，但是项目新需求需要加表格，用过的小伙伴都知道...，最后换成了wangEditor，下面展示从编辑到展示的代码历程，支持粘贴表格，图片自定义上传等功能，支持 IE10+ 浏览器。

官网：www.wangEditor.com

样式参考：

1. 编辑器组件wang-edit

<template>
  <div class="text-edit">
     <div id = "myeditor"></div>
  </div>
</template>

<script type="text/ecmascript-6">
import WangEditor from 'wangeditor'
export default {
  name: "wang-edit",
  components: { WangEditor },
  props: {
    text: {
      type: String // 父组件传过来的值
    }
  },
  data() {
    return {
      editor:null
    };
  },
  computed: {},
  mounted() {
      this.createEditor(); // 编辑器初始化
      this.editor.txt.html(this.text); //初始化赋值
  },
  methods: {
      createEditor(){
            let that = this;
            this.editor = new WangEditor('#myeditor')
            this.editor.customConfig.debug = location.href.indexOf('wangeditor_debug_mode=1') > 0;
            // 带格式粘贴
            this.editor.customConfig.pasteFilterStyle = false;
            //忽略粘贴内容中的图片
            this.editor.customConfig.pasteIgnoreImg = false;
            this.editor.customConfig.customUploadImg = function(files, insert){
                // 图片自定义上传方法
                that.httpUploadImg({type: 3, file: files[0]})
                .then(res => {   
                    insert(res); // 光标处插入图片   
                },(err) => {
                    console.log(err)
                })
            }
            this.editor.customConfig.onchange = (html) => {
                this.info_ = html // 绑定当前值
                this.$emit('change', this.info_) // 将内容同步到父组件中
            }
            this.editor.create();
      }
  },
  watch: {
    text(value) {
         if (value !== this.editor.txt.html()) {
          this.editor.txt.html(value)
        }
    }
  }
};
</script>

2. 父组件调用

<template> 
    <WangEditor :text="text" class="text" @change="changeText" />
</template>
<script type="text/ecmascript-6">
import WangEditor from "../../components/common/wang-edit";
export default {
    components: { WangEditor }, 
    data() {
        return {
            text:''
        }
    },
    methods: {
         changeText(val) {
              // 文本更改
              this.text = val;
         }
    }
};
</script>

3. 详情页的展示

<div class="content-text" v-html="text"></div>

说明：html展示不需要包括特殊标签也无需引用相关css文件，但如果涉及到表格，需要引用部分特殊样式，不是很多，参考网址：https://www.kancloud.cn/wangfupeng/wangeditor3/335775