3.0.0 • Published 8 years ago

quill-image-resize-module v3.0.0

Weekly downloads
10,695
License
MIT
Repository
github
Last release
8 years ago

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.

Demo

Plunker

Usage

Webpack/ES6

import Quill from 'quill';
import { ImageResize } from 'quill-image-resize-module';

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/image-resize.min.js"></script>
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 ],
            // ...
        }
    }
});
onmc-vue-commonsunny-singlecomponentsapplauncherfavmenuckuessner2applauncherfavmenuckuessner3vuetify-quillfd-system-1lms-system-service-frontedfd-systemjlsoftb2bcrm-helper-comps@everything-registry/sub-chunk-2516szzt-componentswf-backend-uiwf-ui-vue2wf-ui-vue3wr-public-viewsunnysinglecomponentsveditvue-antd-tngvue-element-demo-tools-view@comall-backend-builder-test/components-richtext@cqkpr/ant-component@canner/antd-object-editorjrx-bi-report-enginejacob-duong-awry-utilitieslc-echartsvgengchaosoocrate-coretk-quill-editor-tooluma-unimax-mesuma-unimax-webvue-onmc-base-framevue-onmc-plug@burh/nuxt-core51kkadminframework@cojecom/vue2-editorzb-epzy-editorzs-library-uivue_dm_basevue-tofu-uiw-quillwe-vue-elementvue2-editor-with-imageresizevuedraftvue2-editor-forkvue2-editor-pureunimax-web-depv3-ts-comp@groundline/components-antd@groundline/gl-antd-object-editor@glitchr/quill@infinitebrahmanuniverse/nolb-quil@makeen.io/material-ui-kit@mocapi/auto-form@jacquesparis/angular-tree@rabota/rabotifymps-pc-componentsonev-uiodc-vue2-componentsnpmtest_gcpc-components-zpc-componentszxypcip-address-bookpcip-releasesa-vue2-componentss-group-formsadais-editornest-angularngx-quill-examplepossum-utilitiesprichtextquill-alternativequill-prorg-vue-projectgiraffe-editorhntdi-cloud-uiguodun-editorinsterest-webmat-reduce@webdevil/vue3-quill@wirtuozikodu/wk-cms@wxtec/wt-ui@tirrilee/admin-bro-design-system@tracoco/antd-object-editorframework-uifpc-uif_boardequipment-managementafdu-school-componentsawry-utilitiesawry-utilities-2awry-utilities-3ant-component-v2chans-vue-htmleditorclasswin-editordev-onmc-vue-plugindb-quill-vuedemo-vue2-componentsbeescm-fe
3.0.0

8 years ago

1.0.0

8 years ago