quill-resize-module

    1.2.4 • Public • Published

    Quill Resize Module

    A module for Quill rich text editor to allow images/iframe/video and custom elements(convert to placeholder) to be resized.

    This module is original forked from https://github.com/whatcould/quill-image-resize-module.

    Features

    • Image resize.

    • Embed placeholder resize (Default to convert iframe/video tag).

    • Custom any elements resize.

    • Limit minWidth/maxWidth/minHeight/maxHeight.

    • Limit Width/Height ratio.

    • Selected placeholder style.

    • Direction key support.

    Demo

    https://run.plnkr.co/plunks/9YXbATSKGHY0JvPv/ demo

    Usage

    Webpack/ES6

    import Quill from 'quill';
    import QuillResize from 'quill-resize-module';
    Quill.register('modules/resize', QuillResize);
     
    const quill = new Quill(editor, {
        // ...
        modules: {
            // ...
            resize: {
                // See optional "config" below
            }
        }
    });

    use placeholder for iframe/video

    import Quill from 'quill';
    import QuillResize, { PlaceholderRegister } from 'quill-resize-module';
     
    Quill.register('modules/resize', QuillResize);
    // default to iframe/video tag
    // if you went to replace default video blot, see 'demo/script.js'
    PlaceholderRegister();
     
    const quill = new Quill(editor, {
        // ...
        modules: {
            // ...
            resize: {
                // See optional "config" below
            }
        }
    });

    use placeholder for custom element

    import Quill from 'quill';
    import QuillResize, { PlaceholderRegister, EmbedPlaceholder } from 'quill-resize-module';
     
    Quill.register('modules/resize', QuillResize);
     
    class TagPlaceholder extends EmbedPlaceholder { }
    // default to ['iframe', 'video']
    TagPlaceholder.tagName = ['iframe', 'video', 'embed']
    // Important!!! must be null or don't set it
    // TagPlaceholder.className = null
     
    // if you went to replace default video blot, see 'demo/script.js'
     
    class ClassPlaceholder extends EmbedPlaceholder { }
    ClassPlaceholder.className = '.ql-embed'
     
    PlaceholderRegister([TagPlaceholder, ClassPlaceholder])
     
    const quill = new Quill(editor, {
        // ...
        modules: {
            // ...
            resize: {
                // See optional "config" below
            }
        }
    });

    Script Tag

    Copy resize.js into your web root or include from node_modules

    <script src="/node_modules/quill-resize-module/dist/resize.js"></script>
    var quill = new Quill(editor, {
        // ...
        modules: {
            // ...
            resize: {
                // See optional "config" below
            }
        }
    });

    use placeholder for iframe/video

    // if you went to replace default video blot, see 'demo/script.js'
    QuillResize.PlaceholderRegister()
    var quill = new Quill(editor, {
        // ...
        modules: {
            // ...
            resize: {
                // See optional "config" below
            }
        }
    });

    Config

    For the default experience, pass an empty object, like so:

    var quill = new Quill(editor, {
        // ...
        modules: {
            // ...
            resize: {}
        }
    });

    Functionality is broken down into modules, which can be mixed and matched as you like. For example, the default is to include all modules:

    const quill = new Quill(editor, {
        // ...
        modules: {
            // ...
            resize: {
                modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]
            }
        }
    });

    Each module is described below.

    Resize - Resize the element

    Adds handles to the element's corners which can be dragged with the mouse to resize the element.

    The look and feel can be controlled with options:

    var quill = new Quill(editor, {
        // ...
        modules: {
            // ...
            resize: {
                // ...
                // set parchment key to enable resize module
                parchment: {
                    image: {
                        attribute: ['width'],  // ['width', 'height']
                        limit: {
                            minWidth: 200,
                            maxWidth: 600,
                            minHeight: 200,
                            maxHeight: 450,
                            ratio: .5625  // keep width/height ratio. (ratio=height/width)
                        }
                    }
                },
                styles: {
                    handle: {
                        backgroundColor: 'black',
                        border: 'none',
                        color: white
                        // other camelCase styles for size display
                    }
                }
            }
        }
    });

    DisplaySize - Display pixel size

    Shows the size of the image in pixels near the bottom right of the image.

    The look and feel can be controlled with options:

    var quill = new Quill(editor, {
        // ...
        modules: {
            // ...
            resize: {
                // ...
                styles: {
                    display: {
                        backgroundColor: 'black',
                        border: 'none',
                        color: white
                        // other camelCase styles for size display
                    }
                }
            }
        }
    });

    Toolbar - Image alignment tools

    Displays a toolbar below the image, where the user can select an alignment for the image.

    The look and feel can be controlled with options:

    var quill = new Quill(editor, {
        // ...
        modules: {
            // ...
            resize: {
                styles: {
                    // ...
                    toolbar: {
                        backgroundColor: 'black',
                        border: 'none',
                        color: white
                        // other camelCase styles for size display
                    },
                    toolbarButton: {
                        // ...
                    },
                    toolbarButtonSvg: {
                        // ...
                    },
                }
            }
        }
    });

    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,

    import { Resize, BaseModule } from 'quill-resize-module';
     
    class MyModule extends BaseModule {
        // See src/modules/BaseModule.js for documentation on the various lifecycle callbacks
    }
     
    var quill = new Quill(editor, {
        // ...
        modules: {
            // ...
            resize: {
                modules: [ MyModule, Resize ],
                // ...
            }
        }
    });

    Install

    npm i quill-resize-module

    DownloadsWeekly Downloads

    342

    Version

    1.2.4

    License

    MIT

    Unpacked Size

    108 kB

    Total Files

    21

    Last publish

    Collaborators

    • mudoo