1.安装

npm install wangeditor --save

 2.引入

import E from "wangeditor";

 3.新建一个richText.vue的组件，这里包含了如何上传图片，具体代码如下

<template>
  <div id="wangeditor">
    <div ref="editorElem" style="text-align: left"></div>
  </div>
</template>

 最简单的富文本，基本上三步就可搞定：

import E from 'wangeditor'
const editor = new E(this.$refs.editorElem);
editor.create()

 可添加菜单栏、添加事件

<script>
import axios from "axios";
import E from "wangeditor";
import { getImgLink } from "@/network/more.js";
export default {
  props: {
    isAdd: {
      type: String,
      default: false,
    },
    content:{
      type: String
    }
  },
  data() {
    return {
      editor: null,
      editorContent: "",
      imgList: [],
    };
  },
  watch: {
    content:function(){
      this.editor.txt.html(this.content);
    }
  },
  mounted() {
    this.getRichText();
    this.editor.txt.html(this.editorContent);
  },
  methods: {
    getRichText() {
      var that = this;
      this.editor = new E(this.$refs.editorElem);
      this.editor.config.menus = [
        // 菜单配置
        "head", // 标题
        "bold", // 粗体
        "fontSize", // 字号
        "fontName", // 字体
        "italic", // 斜体
        "underline", // 下划线
        "strikeThrough", // 删除线
        "foreColor", // 文字颜色
        "backColor", // 背景颜色
        "link", // 插入链接
        "list", // 列表
        "justify", // 对齐方式
        "quote", // 引用
        "emoticon", // 表情
        "image", // 插入图片
        "table", // 表格
        "code", // 插入代码
        "undo", // 撤销
        "redo", // 重复
      ];
      this.editor.config.showLinkImg = false; //隐藏网络图片上传
      this.editor.config.uploadImgShowBase64 = true; //图片以base64形式保存
      this.editor.config.uploadFileName = "file";

      this.editor.config.customUploadImg = (files, insert) => {
        let fileName = "";
        for (let i = 0; i < files.length; i++) {
          fileName = files[i].name + "," + fileName;
        }
        let obj = {
          fileName: fileName,
        };
        // 获取图片链接
        getImgLink(obj)
          .then((res) => {
            const code = res.data.code;
            if (code == 100) {
              this.imgList = res.data.content;
              for(let i=0; i<this.imgList.length;i++){
                //图片回显
                insert(this.imgList[i])
              };
            } else {
              this.$messsage.error(res.data.message);
            }
          })
          .catch((err) => {
            console.log(err);
          });
      };

      this.editor.config.onchange = (html) => {
        this.editorContent = html;
        //触发父组件的方法，并传值
        this.$emit("submitHandle", this.editorContent);
      };
      this.editor.create(); // 创建富文本实例
    },
  },
};
</script>