CKEditor 5 video feature
This package implements the video feature for CKEditor 5. The feature is introduced in a granular form implemented by a couple of plugins. It was strongly inspired from the ckeditor5-image package.
Demo
- See
sample/app.js
Documentation
Installation
Add this to your custom build or inside your project.
- With npm
npm i yunf-ckeditor-video
- Works pretty much just like Image upload.
Plugins
Video Plugin
- Plugin to parse videos in the editor
- Mandatory for the other plugins VideoRelated plugins
ClassicEditor
.create( document.querySelector( '#editor' ), {
plugins: [Video],
video: {}
} )
VideoUpload Plugin
- Plugin to upload video files via toolbar upload prompt or drag and drop functionalities
- Specify allowed media(mime) types. Default =>
['mp4', 'mp3','webm', 'ogg']
- Allow multiple file upload or not, Default =>
true
- Add the
videoUpload
toolbar option to access the file repository - Must provide an
UploadAdapter
. See ckeditor5 documentation - The use of the Video plugin is mandatory for this plugin to work
function VideoUploadAdapterPlugin( editor ) {
editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
return new VideoUploadAdapter(loader);
};
}
ClassicEditor
.create( document.querySelector( '#editor' ), {
plugins: [Video, VideoUpload],
extraPlugins: [VideoUploadAdapterPlugin],
toolbar: ['videoUpload'],
video: {
upload: {
types: ['mp4','mp3'],
allowMultipleFiles: false,
}
}
} )
VideoToolbar Plugin
- Balloon toolbar for different Video plugin plugins
- See VideoResizing and VideoStyle sections for examples
VideoResizing Plugin
- Plugin for resizing the video in the editor
- Should work just like image resize. See the ck-editor 5 documentation for more examples.
ClassicEditor .create( document.querySelector( '#editor' ), { plugins: [Video, VideoToolbar, VideoResize] or [Video, VideoToolbar, VideoResizeEditing, VideoResizeHandles], video: { resizeUnit: 'px' // Configure the available video resize options. resizeOptions: [ { name: 'videoResize:original', value: null, label: 'Original', icon: 'original' }, { name: 'videoResize:50', value: 50, label: '50', icon: 'medium' }, { name: 'videoResize:75', value: '75', label: '75', icon: 'large' } ], toolbar: [ 'videoResize', '|', 'videoResize:50', 'videoResize:75', 'videoResize:original' ] }, } )
VideoStyle Plugin
- Plugin for styling the video plugins.
- Should work just like image resize. See the ck-editor 5 documentation for more examples.
- Predefined styles are:
full
side
alignLeft
alignCenter
alignRight
ClassicEditor .create( document.querySelector( '#editor' ), { plugins: [Video, VideoToolbar, VideoStyle] video: { styles: [ 'alignLeft', 'alignCenter', 'alignRight' ], toolbar: ['videoStyle:alignLeft', 'videoStyle:alignCenter', 'videoStyle:alignRight'] }, } )
License
Licensed under the terms of
GNU General Public License Version 2 or later. For full details about the license,
please check the LICENSE.md
file.