UEditor百度編輯器的坑

1.粘貼圖片，原有圖片顯示錯誤

config配置中有個參數catchRemoteImageEnable（設置遠程圖片是否抓取到本地），設爲false便可。

2.使用vue-ueditor-wrap 插件致使上傳視頻沒法暫停

修改文件dialogs/video/video.js
uploader.stop() 改爲 uploader.stop(true)

此時，「暫停按鈕」生效，但「繼續上傳」按鈕卻失效。
經排查爲樣式disabled 的問題。

if (!_this.getQueueCount()) {
  $upload.addClass('disabled')
} else {
  $upload.removeClass('disabled')
}
複製代碼

修改成(或者整段註釋)：

if (!_this.getQueueCount()) {
  // $upload.addClass('disabled')
} else {
  $upload.removeClass('disabled')
}
複製代碼

3.無上傳音頻功能

個人作法是將音頻合併在視頻裏上傳。
提交時將內容裏爲mp3的視頻標籤轉爲音頻標籤。

formateContent (data) {
  // 將編輯器內容轉成Dom元素
  const newNode = document.createElement('span')
  newNode.innerHTML = data
  const videosTag = newNode.getElementsByTagName('video')
  if (videosTag.length < 1) {
    return data
  }
  
  // 遍歷檢查video標籤是否爲mp3內容
  for (let i = 0; i < videosTag.length; i += 1) {
    const videoUrl = videosTag[i].getAttribute('src')
    const videoArr = videoUrl.split('.')
    
    if (videoArr[videoArr.length - 1] === 'mp3') {
      const audio = new Audio(videoUrl)
      // 加上controls屬性，保證該audio便籤組件顯示
      audio.setAttribute('controls', '')
      const parent = videosTag[i].parentNode
      parent.innerHTML = ''
      parent.appendChild(audio)
    }
  }
  return newNode.innerHTML
}
複製代碼

4.編輯器添加表格，回顯時表格沒有邊框

須要本身設置樣式。

5.iframe跨域問題

問題：
咱們的前端模板部署在後端，靜態資源前端管理。
致使編輯器某些控件（如視頻上傳、多圖上傳等對話框沒法展現iframe）。

解決：
將百度包部署在後端，將dialogs的文件抽出知足需求的文件，減小後端資源大小。
部署後發現報錯'X-Frame-Options' to 'deny'。
經排查爲後端springboot框架引用security包的限制，將其去掉便可。

6.數據雙向綁定

使用vue-ueditor-wrap 插件。
具體看文檔：www.npmjs.com/package/vue…

7.編輯圖片錯位問題

blog.csdn.net/qq_35405240…