tinymce编辑器 插入视频链接 嵌入iframe视频

    选择打赏方式

TinyMCE编辑器功能强大,万物皆可自定义;视频媒体插入链接,生成自定义的iframe嵌入视频,网易云、BiliBili、抖音、腾讯视频、西瓜视频等等都可以,内容完全自定义。

比如哔哩哔哩视频,只需要输入BV号或链接,就能引用iframe嵌入视频。利用定义正则表达式和与之相关的属性,用于匹配和处理Bilibili视频链接,使用"iframe"作为类型,设置好宽和高,使用播放地址URL并添加匹配到的BV号播放。

可以更改media插件源码,也可以使用media_url_resolver 自定义生成逻辑,都可以实现。参考:media 插入编辑媒体

//网易云音乐 歌曲 歌单 专辑 
{regex: /^https?:\/\/(?:y\.)?music\.163\.com\/(?:m|\#)\/playlist\?id=(\d+)/i, type: 'iframe', w: 400, h: 300, url: 'https://music.163.com/outchain/player?type=0&id=$1', allowFullscreen: false},
{regex: /^https?:\/\/(?:y\.)?music\.163\.com\/(?:m|\#)\/album\?id=(\d+)/i, type: 'iframe', w: 400, h: 350, url: 'https://music.163.com/outchain/player?type=1&id=$1', allowFullscreen: false},
{regex: /^https?:\/\/(?:y\.)?music\.163\.com\/(?:m|\#)\/song\?id=(\d+)/i, type: 'iframe', w: 400, url: 'https://music.163.com/outchain/player?type=2&id=$1', allowFullscreen: false},
//抖音视频
{regex: /^https?:\/\/(?:www|m)\.(?:ies)?douyin\.com\/(?:share\/)?video\/(\d+)/i, type: 'iframe', w: 680, h: 460, url: 'https://www.douyin.com/light/$1', allowFullscreen: true},
//西瓜视频
{regex: /^https?:\/\/(?:www|m)\.ixigua\.com\/(?:video\/)?(\d+)/i, type: 'iframe', w: 680, h: 460, url: 'https://www.ixigua.com/iframe/$1', allowFullscreen: true},
//AcFun
{regex: /^https?:\/\/www\.acfun\.cn\/v\/ac(\d+)/i, type: 'iframe', w: 680, h: 460, url: 'https://www.acfun.cn/player/ac$1', allowFullscreen: true},
{regex: /^https?:\/\/m\.acfun\.cn\/v\/\?ac=(\d+)/i, type: 'iframe', w: 400, h: 600, url: 'https://www.acfun.cn/player/ac$1', allowFullscreen: true},	
//优酷
{regex: /^https?:\/\/(?:v|m)\.youku\.com\/(?:v_show|video)\/id_([\w\-\=]+)/i, type: 'iframe', w: 680, h: 460, url: 'https://player.youku.com/embed/$1', allowFullscreen: true},
//腾讯视频
{regex: /^https?:\/\/v\.qq\.com\/x\/(?:cover|page)\/.*?(\w+)\.html/i, type: 'iframe', w: 680, h: 460, url: 'https://v.qq.com/txp/iframe/player.html?vid=$1', allowFullscreen: true},
{regex: /^https?:\/\/m\.v\.qq\.com\/.*?vid=(\w+)/i, type: 'iframe', w: 400, h: 600, url: 'https://v.qq.com/txp/iframe/player.html?vid=$1', allowFullscreen: true},
//哔哩哔哩
{regex: /BV(.*)/i, type: 'iframe', w: 560, h: 314, url: '//player.bilibili.com/player.html?bvid=$1', allowFullscreen: true},
{regex: /^https?:\/\/(?:www|m)\.bilibili\.com\/video\/BV(\w+)/i, type: 'iframe', w: 680, h: 460, url: 'https://player.bilibili.com/player.html?bvid=BV$1', allowFullscreen: true},
{regex: /^https?:\/\/(?:www|m)\.bilibili\.com\/video\/av(\w+)/i, type: 'iframe', w: 680, h: 460, url: 'https://player.bilibili.com/player.html?aid=$1', allowFullscreen: true},
//搜狐
{regex: /^https?:\/\/tv\.sohu\.com\/v\/([\w\-\=]+)\.html(?:\?vid=(\d+))?/i, type: 'iframe', w: 680, h: 460, url: '//tv.sohu.com/s/sohuplayer/iplay.html?vid=$2', allowFullscreen: true},
{regex: /^https?:\/\/m\.tv\.sohu\.com\/u\/vw\/([\d]+)/i, type: 'iframe', w: 680, h: 460, url: 'https://tv.sohu.com/s/sohuplayer/iplay.html?bid=$1', allowFullscreen: true},
版权声明:若无特殊注明,本文为《寒星皓月》原创,转载请保留文章出处。
本文链接:https://www.wanghanyue.com/post-99.html
作品采用:知识共享署名 4.0 (CC BY-NC-SA 4.0) 国际许可协议 进行许可。
正文到此结束

相关推荐

发表吐槽

你肿么看?

你还可以输入 250 / 250 个字

呵呵 哈哈 羡慕 惊恐 超赞 嗯哼 滑稽 不高兴 大哭 疑问 你懂得 打脸 黑线 委屈 小乖 酷 笑眼 汗 what 鄙视 喷 阴险 怒 吃瓜

评论信息框
可使用QQ号实时获取昵称+头像

私密评论

吃奶的力气提交吐槽中...


既然没有吐槽,那就赶紧抢沙发吧!