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 是服務器端回傳的結果
        // 舉例：假如上傳圖片成功后，服務器端回傳的是 {url:'....'} 這種格式，即可這樣插入圖片：
        var url = Contant.imgurl + result.data.url
        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