quill-image-resizer

    1.0.3 • Public • Published

    Quill ImageResize Module

    A module for Quill rich text editor to allow images to be resized.

    Also see quill-image-drop-module, a module that enables copy-paste and drag/drop for Quill.

    Usage

    Webpack/ES6

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

    Script Tag

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

    <script src="/node_modules/quill-image-resize-module-plus/image-resize.min.js"></script>
    Quill.register('modules/imageResize', window.ImageResize.default);
    var quill = new Quill(editor, {
        // ...
        modules: {
            // ...
            imageResize: {
                // See optional "config" below
            }
        }
    });

    Config

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

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

    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: {
            // ...
            imageResize: {
                modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]
            }
        }
    });

    Each module is described below.

    Resize - Resize the image

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

    The look and feel can be controlled with options:

    var quill = new Quill(editor, {
        // ...
        modules: {
            // ...
            imageResize: {
                // ...
                handleStyles: {
                    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: {
            // ...
            imageResize: {
                // ...
                displayStyles: {
                    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: {
            // ...
            imageResize: {
                // ...
                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,

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

    Install

    npm i quill-image-resizer

    DownloadsWeekly Downloads

    4

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    34.8 kB

    Total Files

    5

    Last publish

    Collaborators

    • smithos