简单封装 wangEditor富文本编辑器，保留大部分粘贴样式

效果：

这个编辑器有个好处就是形成的富文本样式都是行内样式，不用担心样式丢失（除了表格样式），网页粘贴过来的内容能保存大部分样式，粘贴word文档除了图片不行，其他大部分样式基本保留

<template>
  <div>
    <div id="editor"></div>
    <hr />
    效果预览（v-html）
    <div class="html" v-html="text1"></div>
    <hr />
    富文本的 HTML内容 <br />
    <textarea id="text1" v-model="text1" style="height: 200px"></textarea>
    <hr />
  </div>
</template>

<script>
import E from "wangeditor";

export default {
  data() {
    return {
      text1: "",
      editor: undefined,
    };
  },
  computed: {},
  mounted() {
    this.editor = new E("#editor");
    // 设置编辑区域高度为 300px
    this.editor.config.height = 500;
    // 编辑器 z-index 默认为 10000，可以自行调整。
    this.editor.config.zIndex = 20;
    // 可以修改 placeholder 的提示文字。
    this.editor.config.placeholder = "请输入正文";
    // 取消自动 focus
    this.editor.config.focus = false;

    // *****************************************************
    this.editor.config.menus = [
      "head",
      "bold",
      "fontSize",
      "fontName",
      "italic",
      "underline",
      "strikeThrough",
      "indent",
      "lineHeight",
      "foreColor",
      "backColor",
      "link",
      "list",
      "todo",
      "justify",
      "quote",
      "emoticon",
      "image",
      "video",
      "table",
      "code", // 插入代码
      "splitLine",
      "undo",
      "redo",
    ];
    // *****************************************************
    // 配置颜色（文字颜色、背景色）
    this.editor.config.colors = [
      "#000000",
      "#eeece0",
      "#1c487f",
      "#4d80bf",
      "#ffffff",
      "#FF0000",
      "#00FF00",
      " #0000FF",
      "#FF00FF",
      "#FFFF00",
      "#70DB93",
      "#5C3317",
    ];
    // *****************************************************
    // 配置字体
    this.editor.config.fontNames = [
      // 字符串形式
      "仿宋",
      "黑体",
      "楷体",
      "标楷体",
      "华文仿宋",
      "华文楷体",
      "宋体",
      "微软雅黑",
      "Arial",
      "Tahoma",
      "Verdana",
      "Times New Roman",
      "Courier New",
    ];
    // *****************************************************
    // 设置字号，只能改变  name字段
    this.editor.config.fontSizes = {
      "x-small": { name: "14px", value: "1" },
      small: { name: "16px", value: "2" },
      normal: { name: "18px", value: "3" },
      large: { name: "20px", value: "4" },
      "x-large": { name: "22px", value: "5" },
      "xx-large": { name: "24px", value: "6" },
      "xxx-large": { name: "26px", value: "7" },
    };
    // 配置行高
    this.editor.config.lineHeights = [
      "1",
      "1.25",
      "1.5",
      "1.75",
      "2",
      "2.5",
      "3",
    ];
    // *****************************************************
    // 插入网络图片的回调
    this.editor.config.linkImgCallback = function (src, alt, href) {};
    // *********************粘贴********************************
    // 关闭粘贴样式的过滤
    this.editor.config.pasteFilterStyle = false;
    // 忽略粘贴内容中的图片
    this.editor.config.pasteIgnoreImg = false;
    let sss = false;
    // 显示在textarea中
    this.editor.config.onchange = (html) => {
      // 可以在这进行父子组件的传值;
      this.text1 = html;
    };
    // *************************上传图片****************************
    this.editor.config.showLinkImg = true; //上传网络图片
    this.editor.config.uploadImgShowBase64 = true; //base64 保存图片
    // 限制图片大小和类型
    this.editor.config.uploadImgMaxSize = 2 * 1024 * 1024; // 2M
    // // 如果不希望限制类型，可将其设为空数组:
    this.editor.config.uploadImgAccept = [];
    this.editor.config.uploadImgMaxLength = 3; // 一次最多上传 5 个图片
    // ***********************创建富文本***************
    this.editor.create();
  },
};
</script>

<style scoped>
#editor {
  width: 870px;
}
#text1 {
  width: 900px;
}
.html {
  width: 670px;
  margin-left: 200px;
}
.wrap {
  width: 870px;
  min-height: 300px;
  line-height: 300px;
  background-color: rgb(75, 73, 73);
  color: #fff;
  text-align: center;
}
/* 修改富文本字号 */
font[size="1"] {
  font-size: 14px;
}
font[size="2"] {
  font-size: 16px;
}
font[size="3"] {
  font-size: 18px;
}
font[size="4"] {
  font-size: 20px;
}
font[size="5"] {
  font-size: 22px;
}
font[size="6"] {
  font-size: 24px;
}
font[size="7"] {
  font-size: 26px;
}
/* 表格样式 */
/* table 样式  必须加 否则表格没有样式 */
.html >>> table {
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  margin: 10px 0;
  line-height: 1.5;
}
.html >>> table td,
.html >>> table th {
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  padding: 3px 5px;
  min-height: 30px;
  height: 30px;
}
.html >>> table th {
  border-bottom: 2px solid #ccc;
  text-align: center;
  background-color: #f1f1f1;
}
</style>