CKEditor5富文本编辑器 - 视频引入、预览及自定义toolbar
文章目录
- 定义
- 遇到的问题
-
- 视频部分引入媒体url失败
-
- 原因
- 解决方法：自定义视频provider
- 视频预览及页面不显示视频问题
-
- 解决方案：H5
- 如何移除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支持的范围，是依赖于视频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匹配规则，这个地方我就很简单粗暴的定义一个全匹配： /^.*/
<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 (
'' +
`' +
''
);
}
}
]
}
})
.then(editor => {
myEditor = editor;
})
.catch(error => {
console.error(error);
});
</script>
视频预览及页面不显示视频问题
虽然上一步的引入视频成功了，但好像高兴的有点早，引入后视频后，在页面中根本不展示！
只是有这么一段代码，这个
<figure class="media">
<oembed url="https://media-url"></oembed>
</figure>
虽然官方有一堆的解决方案，但是按着步骤一个个尝试，并没啥成效！
经过大牛的点拨，反正已经拿到了url，只是一个展示的问题，那就用H5的
解决方案：H5
<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住前端简单问题的！(〃‘▽’〃)