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…