解决百度ueditor编辑器不能插入视频的问题

今天在撰写一篇文章的时候需要插入一个视频

一、插入视频分享代码后切换可视化后自动被过滤

1、场景重现

目前视频网站仅支持「iframe」形式的分享，那么在我们插入视频分享代码的时候会出现错误。

如Bilibili的视频分享代码

<iframe src="//player.bilibili.com/player.html?aid=802833370&bvid=BV1Yy4y1s7Tt&cid=328845472&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

将「分享代码」通过「编辑器源代码」进行粘贴

再次点击「html」回到可视化界面的时候，源代码就会消失

2、解决思路

1、修改ueditor.config.js

百度编辑器ueditor会在切换源码的时候过滤掉img的_url属性，而这个属性是用来存储视频Url的。

文件目录：/ueditor/ueditor.config.js

修改方法：定位「xss过滤白名单」，大概在364行，对whitList:{ }，的 img: 增加 “_url” 属性：

将代码

img:    ['src', 'alt', 'title', 'width', 'height', 'id', '_src', 'loadingclass', 'class', 'data-latex'],

替换为

img:    ['src', 'alt', 'title', 'width', 'height', 'id', '_src', 'loadingclass', 'class',' _url','data-latex'],

二、增加video标签

增加使三个标签，让Ueditor分别能支持embed标签和iframe标签，这样代码就不会被过滤掉。

1、在video标签后增加「source」、「embed」、「iframe」属性

如果你嫌麻烦，直接替换即可。

将代码

video:  ['autoplay', 'controls', 'loop', 'preload', 'src', 'height', 'width', 'class', 'style']

替换为

video:  ['autoplay', 'controls', 'loop', 'preload', 'src', 'height', 'width', 'class', 'style'],
source: ['src', 'type'],
embed: ['type', 'class', 'pluginspage', 'src', 'width', 'height', 'align', 'style', 'wmode', 'play',  
      +  'autoplay','loop', 'menu', 'allowscriptaccess', 'allowfullscreen', 'controls', 'preload'],
iframe: ['src', 'class', 'height', 'width', 'max-width', 'max-height', 'align', 'frameborder', 'allowfullscreen']

2、代码可以正常显示

调整完毕后，保存、上传、强制刷新，我们会发现视频已经出现了。

三、让视频高度自适应

我们发布后，会发现视频的宽度和高度，并不正常，无法做到自适应。

当然我们可以给视频代码加上宽度，设置width="100%"

但是会发现宽度是变化了，100%，但是高度却还是不正常，高度只有150px，无法正常显示，如果将宽度和高度设置固定值之后，移动端则不能自适应，出现错位问题。

即便设置 height="auto"，也是毫无变化。

后来寻找各种方法，终于找到了解决方案。

1、通过JS控制高度

在页面代码加入以下JS代码

<script type="text/javascript">document.getElementById("video").style.height=document.getElementById("video").scrollWidth*0.8+"px"</script>

2、视频代码设置ID

将视频分享代码加入id="video"的标签

例如

<iframe id="video" src="//player.bilibili.com/player.html?aid=802833370&bvid=BV1Yy4y1s7Tt&cid=328845472&page=1" frameborder="no" allowfullscreen="true"> </iframe>

视频最终就正常了

总结

折腾了半天，总算是解决问题了，不用担心视频没法发布到文章里了。