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

    选择打赏方式

温馨提示:
本文最后更新于2023年07月06日,已超过1年5个月(约534天)没有更新,若内容或图片失效,请留言反馈。

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},
media_url_resolver: (data) => {
	return new Promise((resolve) => {
		let u;
		let t;
		let ixigua = data.url.match(/^https?:\/\/(?:www|m)\.ixigua\.com\/(?:video\/)?(\d+)/i);
		let douyin = data.url.match(/^https?:\/\/(?:www|m)\.(?:ies)?douyin\.com\/(?:share\/)?video\/(\d+)/i);
		let acfun = data.url.match(/^https?:\/\/www\.acfun\.cn\/v\/ac(\d+)/i);
		let acfun_m = data.url.match(/^https?:\/\/m\.acfun\.cn\/v\/\?ac=(\d+)/i);
		let bv = data.url.match(/^BV(\w+)/i);
		let bilibili = data.url.match(/^https?:\/\/(?:www|m)\.bilibili\.com\/video\/BV(\w+)/i);
		let bilibili_av = data.url.match(/^https?:\/\/(?:www|m)\.bilibili\.com\/video\/av(\w+)/i);
		let youku = data.url.match(/^https?:\/\/(?:v|m)\.youku\.com\/(?:v_show|video)\/id_([\w\-\=]+)/i);
		let sohu = data.url.match(/^https?:\/\/tv\.sohu\.com\/v\/([\w\-\=]+)\.html(?:\?vid=(\d+))?/i);
		let sohu_m = data.url.match(/^https?:\/\/m\.tv\.sohu\.com\/u\/vw\/([\d]+)/i);
		let qq = data.url.match(/^https?:\/\/v\.qq\.com\/x\/(?:cover|page)\/.*?(\w+)\.html/i);
		let qq_m = data.url.match(/^https?:\/\/m\.v\.qq\.com\/.*?vid=(\w+)/i);
		let music163_0 = data.url.match(/^https?:\/\/(?:y\.)?music\.163\.com\/(?:m|\#)\/playlist\?id=(\d+)/i);
		let music163_1 = data.url.match(/^https?:\/\/(?:y\.)?music\.163\.com\/(?:m|\#)\/album\?id=(\d+)/i);
		let music163_2 = data.url.match(/^https?:\/\/(?:y\.)?music\.163\.com\/(?:m|\#)\/song\?id=(\d+)/i);
		if (ixigua) { u = 'https://www.ixigua.com/iframe/' + ixigua[1]; }
		else if (douyin) { u = 'https://www.douyin.com/light/' + douyin[1]; }
		else if (acfun) { u = 'https://www.acfun.cn/player/ac' + acfun[1]; }
		else if (acfun_m) { u = 'https://www.acfun.cn/player/ac' + acfun_m[1]; }
		else if (bv) { u = 'https://player.bilibili.com/player.html?bvid=BV' + bv[1]; }
		else if (bilibili) { u = 'https://player.bilibili.com/player.html?bvid=BV' + bilibili[1]; }
		else if (bilibili_av) { u = 'https://player.bilibili.com/player.html?aid=' + bilibili_av[1]; }
		else if (youku) { u = 'https://player.youku.com/embed/' + youku[1]; }
		else if (sohu) {
			let bid = atob(sohu[1]).match(/^us\/\d+\/(\d+)/i);
			if (bid) { u = 'https://tv.sohu.com/s/sohuplayer/iplay.html?bid=' + bid[1]; }
			else if (sohu[2]) { u = 'https://tv.sohu.com/s/sohuplayer/iplay.html?vid=' + sohu[2]; }
		}
		else if (sohu_m) { u = 'https://tv.sohu.com/s/sohuplayer/iplay.html?bid=' + sohu_m[1]; }
		else if (qq) { u = 'https://v.qq.com/txp/iframe/player.html?vid=' + qq[1]; }
		else if (qq_m) { u = 'https://v.qq.com/txp/iframe/player.html?vid=' + qq_m[1]; }
		else if (music163_0) { u = 'https://music.163.com/outchain/player?type=0&id=' + music163_0[1]; t = 'm'; }
		else if (music163_1) { u = 'https://music.163.com/outchain/player?type=1&id=' + music163_1[1]; t = 'm'; }
		else if (music163_2) { u = 'https://music.163.com/outchain/player?type=2&id=' + music163_2[1]; t = 'a'; }
		if (u && !t) { t = 'v'; }
		switch (t) {
			case 'v':
				resolve({ html: '<iframe src="' + u + '" width="680" height="460"></iframe>' }); break;
			case 'm':
				resolve({ html: '<iframe src="' + u + '" width="400" height="600"></iframe>' }); break;
			case 'a':
				resolve({ html: '<iframe src="' + u + '" width="400"></iframe>' }); break;
			default:
				resolve({ html: '' }); break;
		}
	});
},
版权声明:若无特殊注明,本文为《寒星皓月》原创,转载请保留文章出处。
本文链接:https://www.wanghanyue.com/post-99.html
作品采用:知识共享署名 4.0 (CC BY-NC-SA 4.0) 国际许可协议 进行许可。
正文到此结束

相关推荐

发表吐槽

你肿么看?

你还可以输入 250 / 250 个字

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

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

私密评论

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


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