CKEditor5富文本编辑器 - 视频引入、预览及自定义toolbar

Gilana ·

更新时间:2024-09-20

· 705 次阅读

文章目录定义遇到的问题视频部分引入媒体url失败原因解决方法：自定义视频provider视频预览及页面不显示视频问题解决方案：H5 \标签如何移除toolbar中的部分插件
一个小后端很少接触前端框架，只能在知识的海洋中漂泊。。。定义


	
        
            
            
        
        
            
                
            
        
    
    var myEditor;
    ClassicEditor
        .create(document.querySelector("#ckEditor"), {
            language: {
                ui: 'zh-cn'
            },
            ckfinder: {
                uploadUrl: '[[@{/upload}]]'
            }
        })
        .then(editor => {
            myEditor = editor;
        })
        .catch(error => {
            console.error(error);
        });

遇到的问题

在开发的过程中，遇到了很多问题，深刻觉得CKEditor5不愧是一个低调的富文本编辑器，中文资料很少，只能硬着头皮去看官方的英文文档

视频部分引入媒体url失败

现象：点击工具栏中的视频选项，随便引入一个媒体url，提示不支持该媒体url

原因

媒体url支持的范围，是依赖于视频provoder中定义的！

Media providers
CKEditor 5 comes with several supported media providers that can be extended or altered.
Names of providers with previews:
'dailymotion',
'spotify',
'youtube',
'vimeo'.
Names of providers without previews:
'instagram',
'twitter',
'googleMaps',
'flickr',
'facebook'.

目前CKEditor5支持的视频provider仅有dailymotion、spotify、youtube、vimeo、instagram、twitter、googleMaps、flickr和facebook，每个provider都有自己的媒体url匹配路径，具体可查看meida-embed源码，

editor.config.define( 'mediaEmbed', {
	providers: [
		{
			name: 'dailymotion',
			url: /^dailymotion\.com\/video\/(\w+)/,
			html: match => {
				const id = match[ 1 ];
				return (
					'' +
						`' +
						'' +
					''
				);
			}
		},
		{
			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 (
					'' +
						`' +
						'' +
					''
				);
			}
		},
		{
			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 (
					'' +
						`' +
						'' +
					''
				);
			}
		},
		......
		//只列出部分，具体可以看CKEditor5源码
	]
} );

解决方法：自定义视频provider

在原有js部分中的初始化加入自定义的provider，在url属性中定义自己的url匹配规则，这个地方我就很简单粗暴的定义一个全匹配： /^.*/


    var myEditor;
    ClassicEditor
        .create(document.querySelector("#ckEditor"), {
            language: {
                ui: 'zh-cn'
            },
            ckfinder: {
                uploadUrl: '[[@{/upload}]]'
            },
            mediaEmbed: {
            	providers: [
            		{
    					name: 'myprovider',
    					url: [
    						/^lizzy.*\.com.*\/media\/(\w+)/,
    						/^www\.lizzy.*/,
    						/^.*/
    					],
    					html: match => {
    						//获取媒体url
    						const input = match['input'];
							//console.log('input' + match['input']);
    						return (
    							'' +
    								`' +
    								'' +
    							''
    						);
    					}
    				}
                ]
            }
        })
        .then(editor => {
            myEditor = editor;
        })
        .catch(error => {
            console.error(error);
        });

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

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

虽然官方有一堆的解决方案，但是按着步骤一个个尝试，并没啥成效！

经过大牛的点拨，反正已经拿到了url，只是一个展示的问题，那就用H5的

解决方案：H5


   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);
    } );

加入后，完美解决~~

如何移除toolbar中的部分插件

在初始化的时候，添加removePlugins属性，在后面的数组中添加想要删除的插件，以下示例未，删除插件：粗体、斜体和视频。

var myEditor;
    ClassicEditor
        .create(document.querySelector("#ckEditor"), {
        	//移除富文本编辑器的工具栏中部分工具
        	removePlugins: ['Bold', 'Italic', 'MediaEmbed'],
            language: {
                ui: 'zh-cn'
            },
            ckfinder: {
                uploadUrl: '[[@{/upload}]]'
            },
         })
        .then(editor => {
            myEditor = editor;
        })
        .catch(error => {
            console.error(error);
        });

对比效果图