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

一个小后端很少接触前端框架，只能在知识的海洋中漂泊。。。

定义

<script src="https://cdn.ckeditor.com/ckeditor5/16.0.0/classic/ckeditor.js"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/16.0.0/classic/translations/zh-cn.js"></script>

<form id="formId" class="form-horizontal">
	<div class="row">
        <div class="form-group">
            <div class="col-xs-12">
              <input type="text" class="form-control" id="title" name="title" placeholder="标题" >
            </div>
        </div>
        <div class="form-group">
            <div class="col-xs-12">
                <textarea id="ckEditor"></textarea>
            </div>
        </div>
    </div>
</form>

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

遇到的问题

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

视频部分引入媒体url失败

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

原因

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

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 (
					'<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>'
				);
			}
		},
		......
		//只列出部分，具体可以看CKEditor5源码
	]
} );

解决方法：自定义视频provider

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

<script>
    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 (
    							'<div style="position: relative; padding-bottom: 100%; height: 0; padding-bottom: 70%;">' +
    								`<iframe src="https://${input}" ` +
    									'style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" ' +
    									'frameborder="0" allowtransparency="true" allow="encrypted-media">' +
    								'</iframe>' +
    							'</div>'
    						);
    					}
    				}
                ]
            }
        })
        .then(editor => {
            myEditor = editor;
        })
        .catch(error => {
            console.error(error);
        });
</script>

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

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

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

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

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

解决方案：H5 <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>

加入后，完美解决~~

如何移除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);
        });   

后记：倒腾了一大圈，终于搞定啦！虽然过程很艰辛，但是坚持下也是能hold住前端简单问题的！(〃‘▽’〃)