A module for Quill rich text editor to allow videos to be resized.
npm install quill-video-resize-moduleA module for Quill rich text editor to allow videos to be resized.
Lazily adaptated from kensnyder/quill-image-resize-module
``javascript
import Quill from 'quill';
import VideoResize from 'quill-video-resize-module';
Quill.register('modules/VideoResize', VideoResize);
const quill = new Quill(editor, {
// ...
modules: {
// ...
videoResize: {
// See optional "config" below
}
}
});
`
/!\ You also need to add CSS to disable pointer-events in the video iframe while in editor mode to prevent
`css`
.quill-editor iframe {
pointer-events: none;
}
Copy video-resize.min.js into your web root or include from node_modules
`html`
`javascript`
var quill = new Quill(editor, {
// ...
modules: {
// ...
VideoResize: {
// See optional "config" below
}
}
});
/!\ You also need to add CSS to disable pointer-events in the video iframe while in editor mode to prevent
`css`
.quill-editor iframe {
pointer-events: none;
}
For the default experience, pass an empty object, like so:
`javascript
var quill = new Quill(editor, {
// ...
modules: {
// ...
VideoResize: {}
}
});
Functionality is broken down into modules, which can be mixed and matched as you like. For example,
the default is to include all modules:
`javascript`
const quill = new Quill(editor, {
// ...
modules: {
// ...
VideoResize: {
modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]
}
}
});
Each module is described below.
#### Resize - Resize the video
Adds handles to the video's corners which can be dragged with the mouse to resize the video.
The look and feel can be controlled with options:
`javascript`
var quill = new Quill(editor, {
// ...
modules: {
// ...
VideoResize: {
// ...
handleStyles: {
backgroundColor: 'black',
border: 'none',
color: white
// other camelCase styles for size display
}
}
}
});
#### DisplaySize - Display pixel size
Shows the size of the video in pixels near the bottom right of the video.
The look and feel can be controlled with options:
`javascript`
var quill = new Quill(editor, {
// ...
modules: {
// ...
VideoResize: {
// ...
displayStyles: {
backgroundColor: 'black',
border: 'none',
color: white
// other camelCase styles for size display
}
}
}
});
#### Toolbar - Video alignment tools
Displays a toolbar below the video, where the user can select an alignment for the video.
The look and feel can be controlled with options:
`javascript`
var quill = new Quill(editor, {
// ...
modules: {
// ...
VideoResize: {
// ...
toolbarStyles: {
backgroundColor: 'black',
border: 'none',
color: white
// other camelCase styles for size display
},
toolbarButtonStyles: {
// ...
},
toolbarButtonSvgStyles: {
// ...
},
}
}
});
#### BaseModule - Include your own custom module
You can write your own module by extending the BaseModule class, and then including it in
the module setup.
For example,
`javascript
import { Resize, BaseModule } from 'quill-video-resize-module';
class MyModule extends BaseModule {
// See src/modules/BaseModule.js for documentation on the various lifecycle callbacks
}
var quill = new Quill(editor, {
// ...
modules: {
// ...
VideoResize: {
modules: [ MyModule, Resize ],
// ...
}
}
});
``