wangeditor富文本编辑器的使用，以及开发中遇到的奇葩bug

这两天在pc端和h5都做了一个富文本编辑器的功能。
h5用的uniapp做的，它里面有editor组件直接使用就行了，其中出现的问题就是，上传图片逆时针90度旋转了，这个问题在我之前的文章也写了解决办法。
这次主要说一下在pc端用wangeditor开发过程中的一些细节问题

1.下载引入

npm install wangeditor

<el-form-item label="文章内容" required>
	<div class="websiteEditorElem">
	  <div id="websiteEditorElem"/>
	</div>
</el-form-item>

import E from 'wangeditor'

2.配置、使用

  mounted() {
    this.editor = new E(document.getElementById('websiteEditorElem'))
    //设置层级，不然像我遇到了与DatePicker日期选择器下拉点击日期冲突的问题
    this.editor.customConfig.zIndex = 1000
    
    // 上传图片到服务器，base64形式
    this.editor.customConfig.uploadImgShowBase64 = true
    this.editor.customConfig.uploadImgServer = '服务器地址'
        
	//定义上传文件的名字，我当时没定义为file导致失败
    this.editor.customConfig.uploadFileName = 'file'
    
    // 隐藏网络图片，若不隐藏则可以通过插入图片地址的方式插入网图
    this.editor.customConfig.showLinkImg = false
    this.editor.customConfig.pasteFilterStyle = false
    this.editor.customConfig.debug = false
    
    // 上传图片的结果反馈
    this.editor.customConfig.uploadImgHooks = {
      before: function(xhr, editor, files) {
        // 图片上传之前触发
        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件
        // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
        // console.log('before:', xhr)
      },
      success: function(xhr, editor, result) {
        // 图片上传并返回结果，图片插入成功之后触发
        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
        console.log('success:', result)
      },
      fail: function(xhr, editor, result) {
        // 图片上传并返回结果，但图片插入错误时触发
        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
        console.log('fail:', result, xhr, editor)
      },
      error: function(xhr, editor, result) {
        // 图片上传出错时触发
        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
        console.log(result, ' 图片上传出错时触发')
      },
      // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
      // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
      customInsert: function(insertImg, result, editor) {
        console.log('自定义插入图片的事件', result)
        // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
        // insertImg 是插入图片的函数，参数editor 是编辑器对象，result 是服务器端返回的结果
        var url = Contant.imgurl + result.data.url//Contant.imgurl 是我的当前环境的地址前缀 http://220.189.200.180:28084/services/business,你们根据自己需求修改
        insertImg(url)
        // result 必须是一个 JSON 格式字符串！！！否则报错
      }
    }
    
    // 将图片大小限制为 10M
    this.editor.customConfig.uploadImgMaxSize = 10 * 1024 * 1024
    //我遇到了，在现场演示失败的问题。若是上传较大的图片或者网速不好，上传比较慢，可以设置时间长一点
    this.editor.customConfig.uploadImgTimeout = 60000
    
    // 自定义处理粘贴的文本内容，我遇到了从world文档粘贴的内容会有一些不需要的标签，导致存到后台的数据特别大，于是做了一些处理
    this.editor.customConfig.pasteTextHandle = (content) => {
      // content 即粘贴过来的内容（html 或 纯文本），可进行自定义处理然后返回
      if (content === '' && !content) return ''
      var html = content
      html = html.replace(/<xml>[\s\S]*?<\/xml>/ig, '')
      html = html.replace(/<style>[\s\S]*?<\/style>/ig, '')
      html = html.replace(/<\/?[^>]*>/g, '')
      html = html.replace(/[ | ]*\n/g, '\n')
      html = html.replace(/&nbsp;/ig, '')
      // // 去除复制后的前后空格
      html = html.replace(/<\/?SPANYES[^>]*>/gi, '')//  移除span
      html = html.replace(/<(\w[^>]*) {2}lang=([^|>]*)([^>]*)/gi, '<$1$3')// 移除lang属性
      html = html.replace(/<\\?\?xml[^>]*>/gi, '')//  移除xml和相关描述
      html = html.replace(/<\/?\w+:[^>]*>/gi, '')// 移除xml命名空间的标签
      html = html.replace(/&nbsp;/gi, '')//  移除空格
      html = html.replace(/^\s+|\s+$/g, '')
      html = html.replace(/<o:p> <\/o:p>/g, '')// 移除标签
      html = html.replace(/<br\/>/g, '')// 移除br标签
      return html
    }

    // 编辑器的事件，每次改变会获取其html内容（html内容是带标签的）
    //在这可以获取编辑器正在输入的内容，刚开始做了一个编辑字数大致限制，因为标签没办法计算精准
    this.editor.customConfig.onchange = html => {
      console.log(html.length, html, '正在输入的内容')
      // if (html.length > 15000) {
      //   this.zi_num = false
      //   this.$message.error('文章内容过多，请删除部分内容')
      // } else {
      //   this.zi_num = true
      // }
      //this.zi_num = true
    }


    // 自定义alert，当上传过程中出现问题了，这里可以友好提示
    this.editor.customConfig.customAlert = (s) => {
      // console.log('customAlert: ' + s)
      this.$notify.error({
        title: '错误',
        message: s
      })
    }
    
    // 创建一个富文本编辑器
    //千万记住，上面配置好了，再创建，我当时遇到的脑残问题
    this.editor.create()
    // 富文本内容
    this.editor.txt.html()
    this.previewContent = this.editor.txt.html()
    console.log(this.previewContent, 'this.editor.txt')
  },

如果大家开发过程中遇到了什么特别的问题欢迎留言，大家一起解决，希望这篇文章对你有帮助！
借鉴原文：https://blog.csdn.net/weixin_44258964/article/details/103213167