Ckeditor 5 Media组件无法插入B站视频解决

编程教程 > WEB > Web Editor (36) 2024-11-29 12:37:47

默认支持的媒体网站

支持预览

'dailymotion',
'spotify',
'youtube',
'vimeo'.

不支持预览

'instagram',
'twitter',
'googleMaps',
'flickr',
'facebook'.

参考ckeditor 5 官方文档：Media embed | CKEditor 5 Documentation

自定义支持媒体

自定义及插入媒体框在编辑器样式，在官方文档中有所写，分两种方案，方案一：扩展自带的；方案二：直接覆盖自带的

先决条件：确认导入了`mediaEmbed`插件

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ MediaEmbed, /* ... */ ],
        toolbar: [ 'mediaEmbed', /* ... */ ]
        mediaEmbed: {
            removeProviders: [ 'instagram', 'twitter', 'googleMaps', 'flickr', 'facebook' ]
        }
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

方案一：扩展自定义媒体支持

格式

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ MediaEmbed, /* ... */ ],,
        toolbar: [ 'mediaEmbed', /* ... */ ]
        mediaEmbed: {
            extraProviders: [
                {
                    // 提供媒体URL正则表达式或URL正则表达式数组 / A URL regular expression or an array of URL regular expressions:
                    url: /^example\.com\/media\/(\w+)/,

                    // 在编辑器预览时候的样式和标签模板 / To be defined only if the media are previewable:
                    html: match => '...'
                },
                // 可配置多个媒体提供者 / More providers.
                // ...
            ]
        }
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

文档参考：Interface MediaEmbedConfig (media-embed/mediaembedconfig~MediaEmbedConfig) | CKEditor 5 API docs

源码自带`providers`者参考

ckeditor5-media-embed/src/mediaembedediting.js at master · ckeditor/ckeditor5-media-embed · GitHub

providers: [
	{
		name: 'dailymotion',
		url: /^dailymotion\.com\/video\/(\w+)/,
		html: match => {
			const id = match[ 1 ];

			return (
				'<div style="position: relative; padding-bottom: 100%; height: 0; ">' +
					`<iframe src="https://www.dailymotion.com/embed/video/${ id }" ` +
						'style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" ' +
						'frameborder="0" width="480" height="270" allowfullscreen allow="autoplay">' +
					'</iframe>' +
				'</div>'
			);
		}
	},

	{
		name: 'spotify',
		url: [
			/^open\.spotify\.com\/(artist\/\w+)/,
			/^open\.spotify\.com\/(album\/\w+)/,
			/^open\.spotify\.com\/(track\/\w+)/
		],
		html: match => {
			const id = match[ 1 ];

			return (
				'<div style="position: relative; padding-bottom: 100%; height: 0; padding-bottom: 126%;">' +
					`<iframe src="https://open.spotify.com/embed/${ id }" ` +
						'style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" ' +
						'frameborder="0" allowtransparency="true" allow="encrypted-media">' +
					'</iframe>' +
				'</div>'
			);
		}
	},

	{
		name: 'youtube',
		url: [
			/^(?:m\.)?youtube\.com\/watch\?v=([\w-]+)/,
			/^(?:m\.)?youtube\.com\/v\/([\w-]+)/,
			/^youtube\.com\/embed\/([\w-]+)/,
			/^youtu\.be\/([\w-]+)/
		],
		html: match => {
			const id = match[ 1 ];

			return (
				'<div style="position: relative; padding-bottom: 100%; height: 0; padding-bottom: 56.2493%;">' +
					`<iframe src="https://www.youtube.com/embed/${ id }" ` +
						'style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" ' +
						'frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>' +
					'</iframe>' +
				'</div>'
			);
		}
	},

	{
		name: 'vimeo',
		url: [
			/^vimeo\.com\/(\d+)/,
			/^vimeo\.com\/[^/]+\/[^/]+\/video\/(\d+)/,
			/^vimeo\.com\/album\/[^/]+\/video\/(\d+)/,
			/^vimeo\.com\/channels\/[^/]+\/(\d+)/,
			/^vimeo\.com\/groups\/[^/]+\/videos\/(\d+)/,
			/^vimeo\.com\/ondemand\/[^/]+\/(\d+)/,
			/^player\.vimeo\.com\/video\/(\d+)/
		],
		html: match => {
			const id = match[ 1 ];

			return (
				'<div style="position: relative; padding-bottom: 100%; height: 0; padding-bottom: 56.2493%;">' +
					`<iframe src="https://player.vimeo.com/video/${ id }" ` +
						'style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" ' +
						'frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>' +
					'</iframe>' +
				'</div>'
			);
		}
	},

	{
		name: 'instagram',
		url: /^instagram\.com\/p\/(\w+)/
	},
	{
		name: 'twitter',
		url: /^twitter\.com/
	},
	{
		name: 'googleMaps',
		url: /^google\.com\/maps/
	},
	{
		name: 'flickr',
		url: /^flickr\.com/
	},
	{
		name: 'facebook',
		url: /^facebook\.com/
	}
]

案例：扩展bilibili的视频播放

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ MediaEmbed, /* ... */ ],,
        toolbar: [ 'mediaEmbed', /* ... */ ]
        mediaEmbed: {
            extraProviders: [
                        {
                            name: 'custom-bilibili1',
                            url: [
                                /^(player.bilibili.com\/player.html.*)/
                            ],
                            html: match => {
                                const id = match[ 1 ];
                                return (
                                    '<div style="position: relative; padding-bottom: 100%; height: 0; padding-bottom: 56.2493%;">' +
                                    `<iframe src="${id}" ` +
                                    'style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" ' +
                                    'frameborder="0" allowtransparency="true" allow="encrypted-media">' +
                                    '</iframe>' +
                                    '</div>'
                                );
                            }
                        },
                // 可配置多个媒体提供者 / More providers.
                // ...
            ]
        }
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

测试地址：https://player.bilibili.com/player.html?isOutside=true&aid=113531638776792&bvid=BV11zByYBECT&cid=26934313222&p=1&autoplay=0 （该地址从视频分享的代码渠道部分获得）

其他平台

extraProviders: [
    {
        name: 'custom-iframes-v',
        url: [
            /^(player.bilibili.com\/player.html.*)/,    //bilibili
            /^(player.youku.com\/embed\/.*)/,           //优酷
            /^(v.qq.com\/txp\/iframe\/player\.html.*)/, //腾讯视频
            /^(www.xigua.com\/iframe\/.*)/,             //西瓜视频
            /^(tv.sohu.com\/s\/sohuplayer\/iplay.html.*)/,//搜狐视频
        ],
        html: match => {
            const url = match[ 1 ];
            return (
                '<div style="position: relative; padding-bottom: 100%; height: 0; padding-bottom: 56.2493%;">' +
                `<iframe src="//${url}" ` +
                'style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" ' +
                'frameborder="0" allowtransparency="true" allow="encrypted-media">' +
                '</iframe>' +
                '</div>'
            );
        }
    },
]

注意：如果你同时引入了链接自动识别插件，浏览器复制的打开页面地址过来可能优先展示链接信息了

方案二：重写`mediaEmbed`插件提供者

mediaEmbed格式官方参考：

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ MediaEmbed, /* ... */ ],,
        toolbar: [ 'mediaEmbed', /* ... */ ]
        mediaEmbed: {
            providers: [
                {
                    // 提供媒体URL正则表达式或URL正则表达式数组 / A URL regular expression or an array of URL regular expressions:
                    url: /^example\.com\/media\/(\w+)/,

                    // 在编辑器预览时候的样式和标签模板 / To be defined only if the media are previewable:
                    html: match => '...'
                },
                // 可配置多个媒体提供者 / More providers.
                // ...
            ]
        }
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

mediaEmbed案例参考

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ MediaEmbed, /* ... */ ],,
        toolbar: [ 'mediaEmbed', /* ... */ ]
        mediaEmbed: {
            	providers: [
            	...其他的把官方的复制过来也行....
				{
        				name: 'custom-iframes-v',
        				url: [
            				/^(player.bilibili.com\/player.html.*)/,    //bilibili
            				/^(player.youku.com\/embed\/.*)/,           //优酷
            				/^(v.qq.com\/txp\/iframe\/player\.html.*)/, //腾讯视频
            				/^(www.xigua.com\/iframe\/.*)/,             //西瓜视频
            				/^(tv.sohu.com\/s\/sohuplayer\/iplay.html.*)/,//搜狐视频
        				],
        				html: match => {
            				const url = match[ 1 ];
            				return (
                				'<div style="position: relative; padding-bottom: 100%; height: 0; padding-bottom: 56.2493%;">' +
                				`<iframe src="//${url}" ` +
                				'style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" ' +
                				'frameborder="0" allowtransparency="true" allow="encrypted-media">' +
                				'</iframe>' +
                				'</div>'
            				);
        				}
    				},
             ]
        }
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

其实就是替换了内置的providers

视频预览及页面不显示视频问题

虽然上一步的引入视频成功了，但好像高兴的有点早，引入后视频后，在页面中根本不展示！
只是有这么一段代码，这个<oembed>标签从来没见过=_=||

<figure class="media">
   <oembed url="https://media-url"></oembed>
</figure>

解决方案：H5 <video>标签 / iframe 标签

video方案：

<script>
  document.querySelectorAll( 'oembed[url]' ).forEach( element => {
        const videoLable = document.createElement( 'video' );
       videoLable.setAttribute( 'src', element.getAttribute( 'url' ) );
       videoLable.setAttribute( 'controls', 'controls' );
       videoLable.setAttribute( 'style', ' width: 100%;height: 100%; ' );
       element.appendChild( videoLable);
   } );
</script>

iframe 方案【推荐|兼容性好】

<script>
  document.querySelectorAll( 'oembed[url]' ).forEach( element => {
    const videoLable = document.createElement( 'iframe' );
    videoLable.setAttribute( 'src', element.getAttribute( 'url' ) );
    videoLable.setAttribute( 'scrolling', 'no' );
    videoLable.setAttribute( 'border', '0' );
    videoLable.setAttribute( 'frameborder', 'no' );
    videoLable.setAttribute( 'framespacing', '0' );
    videoLable.setAttribute( 'allowfullscreen', 'true' ); //移动端全屏
    videoLable.setAttribute( 'sandbox', 'allow-top-navigation allow-same-origin allow-forms allow-scripts' );//禁止弹出网页
    videoLable.setAttribute( 'style', 'width: 100%;height: 600px;' );
    element.appendChild( videoLable);
  } );
</script>