百度编辑器回显html,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.编辑图片错位问题