1、在vue中使用wangEditor

网上的资料一堆，但基本都是wangEditor3的运用，wangEditor4只需要把customConfig 改成config即可。
例如：关于在vue项目中使用wangEditor

2、标题样式、斜体样式不生效

感谢文章：https://blog.csdn.net/weixin_44258964/article/details/103213167
原因：设置的全局样式导致样式失效
解决：重新对编辑器的样式进行设置，覆盖全局即可

通过查找原始默认样式：webkit内核的默认样式
添加到你的.vue文件中覆盖reset.css的样式。

 /*
  *  以下样式由于全局reset文件被覆盖，所以需要重新定义
  */
  ::v-deep h5, .h5 {
    font-size: 14px;
  }

  ::v-deep h4, .h4 {
    font-size: 16px;
    font-weight: bold;
  }

  ::v-deep h3, .h3 {
    font-size: 18px;
    font-weight: bold;
  }

  ::v-deep h2, .h2 {
    font-size: 20px;
    font-weight: bold;
  }

  ::v-deep h1, .h1 {
    font-size: 22px;
    font-weight: bold;
  }
  ::v-deep i {
    font-style: italic
  }
  ::v-deep .w-e-toolbar .w-e-menu i {
    font-style: normal;
  }
  ::v-deep ol {
    list-style-type: decimal;
  }

3、插入表格、引用等显示空白

官网有说明这点：
获取 html 中需要注意的是：从编辑器中获取的 html 代码是不包含任何样式的纯 html，如果显示的时候需要对其中的 <table> <code> <blockquote>等标签进行自定义样式（这样既可实现多皮肤功能）

官网有提供样式参考，复制下来，改吧改吧就可以了。

 /* ul ol 样式 */
  ::v-deep ol{
    margin: 10px 0 10px 22px;
    list-style-type: decimal;
  }
  ::v-deep ul{
    margin: 10px 0 10px 22px;
    list-style-type: disc;
  }
  /* table 样式 */
  ::v-deep table {
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
  }
  ::v-deep table td,
  ::v-deep table th {
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
    padding: 3px 5px;
    height:32px;
  }
  ::v-deep table th {
    border-bottom: 2px solid #ccc;
    text-align: center;
    background-color: #f1f1f1 ;
  }

  /* blockquote 样式 */
  ::v-deep blockquote {
    display: block;
    border-left: 8px solid #d0e5f2;
    padding: 5px 10px;
    margin: 10px 0;
    line-height: 1.4;
    min-height: 24px;
    font-size: 100%;
    background-color: #f1f1f1;
  }

  /* code 样式 */
  ::v-deep code {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    background-color: #f1f1f1;
    border-radius: 3px;
    padding: 3px 5px;
    margin: 0 3px;
  }
  ::v-deep pre code {
    display: block;
  }
  ::v-deep a {
    // text-decoration: underline;
    color: #5592e5;
  }

3、编辑器实例化不成功报错

解决：在mounted中实现

 mounted() {
     this.seteditor()
 },
 //methods
 seteditor(){
	 const editor = new E(this.$refs.toolbar, this.$refs.editor)
	 editor.config.placeholder = this.placeholder
	 // ... 配置
	 
	 // 创建富文本编辑器
	 this.editor = editor
	 this.editor.create()
 },

4、图片上传，复制的内容没有自动添加到服务器

这里主要注意的是uploadFileName一定要根据你们的接口来！！！

/**
* 图片上传部分
*/
 editor.config.uploadImgShowBase64 = false // base 64 存储图片
 editor.config.uploadImgServer = host + '/api/common/file/image' // 配置服务器端地址
 editor.config.uploadImgHeaders = {} // 自定义 header
 editor.config.uploadFileName = 'image' // 后端接受上传文件的参数名 --> 重点修改，参考后台给的地址
 editor.config.uploadImgMaxSize = 10 * 1024 * 1024 // 图片大小限制  --> 看后台接口的限制
 editor.config.uploadImgMaxLength = 1 // 限制一次最多上传 1 张图片  --> 看后台接口的限制
 editor.config.uploadImgTimeout = 3 * 60 * 1000 // 设置超时时间
 editor.config.debug = false

5、存在的XSS问题

因为wangEditor的输出的是html和text， 如果你只需要纯文本就不需要用wangEditor了，我们的需求是输出html，数据库保存的也是html，如果是通过wangEditor组件输入的文本暂时没有发现xss的问题，因为组件有进行转义：

<a href="javascript:alert(123)">123</a>
转成：
&lt;a href="javascript:alert(123)"&gt;123&lt;/a&gt;

但是不通过文本框输入，而是直接拦截，改接口字段的话，就能进行xss攻击。

我们暂时采用的是对返回文本进行过滤，通过DOMPurify这个插件。简单好用

安装：
npm install dompurify

使用：
import DOMPurify from 'dompurify'
//res.content 是返回的脏html
const content = DOMPurify.sanitize(res.content)

当然，为了保险，后台也采用了过滤机制，使用了JSOUP，不过这个有个问题，img中的src如果是相对路径，会把src给过滤掉，这个需要注意在whitelist中进行一些配置修改。