wangEditor使用iframe插入视频，直接在编辑器内查看视频，腾讯优酷为例

本文链接：https://blog.youkuaiyun.com/weixin_45575273/article/details/106659683

腾讯：
在这里插入图片描述
优酷：

找到视频的分享按钮，有复制通用代码，代码复制下来是这样的：
这是腾讯视频的
<iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=n0020yrnly7" allowFullScreen="true"></iframe>

这个是优酷视频的：
<iframe height=498 width=510 src='https://player.youku.com/embed/XMjcwNjg5MTk2' frameborder=0 'allowfullscreen'></iframe>

多复制几个可以发现，腾讯视频中所有视频的不同之处在于vid不同，自己把每个视频的vid获取到。优酷中是embed/后面的数据不同，更改wangEditor.js中的代码，找到Video.prototype，然后更改插入视频的代码
因为插入视频来源有很多，所以需要先判断下
腾讯视频就只用判断下是不是有qq.com，优酷视频需要判断是不是有youku.com

if(val.split(':').slice(1).toString().indexOf('qq.com')!=-1){//腾讯
var value=val.split('/').slice(-1).toString().split('.')[0].toString()
var iframe= `<iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=${value}" allowFullScreen="true" height="498" width="510"></iframe>`
_this._insert(iframe);
 }else if(val.split(':').slice(1).toString().indexOf('youku.com')!=-1){//优酷
var value=val.split('/').slice(-1).toString().split('.')[0].toString().split('_')[1].toString()
 var iframe= `<iframe height=498 width=510 src='https://player.youku.com/embed/${value}' frameborder=0 allowfullscreen="true"></iframe></iframe>`
 _this._insert(iframe);
}

下面是我自己的代码
在这里插入图片描述