Quill VideoResize Module
A module for Quill rich text editor to allow videos to be resized. Lazily adaptated from kensnyder/quill-image-resize-module
Usage
Webpack/ES6
;; Quill; const 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
Script Tag
Copy video-resize.min.js into your web root or include from node_modules
var 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
Config
For the default experience, pass an empty object, like so:
var quill = editor // ... modules: // ... VideoResize: {} ; Functionality is broken down into modules which can be mixed and matched as you like For examplethe default is to include all modules: ```javascriptconst 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:
var 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:
var 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:
var 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,
; // See src/modules/BaseModule.js for documentation on the various lifecycle callbacks var quill = editor // ... modules: // ... VideoResize: modules: MyModule Resize // ... ;