Package Exports

@boxcc/ckeditor5-video
@boxcc/ckeditor5-video/src/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@boxcc/ckeditor5-video) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@kinto-technologies/ckeditor5-video

This package was created by the ckeditor5-package-generator package.

This plugin is enabling add video tag to CKEditor5 based on @visao/ckeditor5-video.

Demo

Run sample application by blow command.

yarn start

Installation

Add this to your custom build or inside your project.

With npm

npm install --save-dev @kinto-technologies/ckeditor5-video

With yarn

yarn add -D @kinto-technologies/ckeditor5-video

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', 'webm', 'ogg']
Allow multiple file upload or not, Default => true
Add the videoUpload toolbar option to access the file repository
Must provide an UploadAdapter.
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'],
                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

The @kinto-technologies/ckeditor5-video package is available under MIT license.

However, it is the default license of packages created by the ckeditor5-package-generator package and it can be changed.