Socket
Socket
Sign inDemoInstall

quill-image-resize-module--fix-imports-error

Package Overview
Dependencies
424
Maintainers
1
Versions
1
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

quill-image-resize-module--fix-imports-error

A module for Quill rich text editor to allow images to be resized. And fix some error


Version published
Maintainers
1
Created

Changelog

Source

v3.0.0 - April 9, 2017

  • Position drag handles relative to editor, not document
  • Simplify toolbar and use floats
  • Improved styling

Readme

Source

IMPORTANT NOTE:

It's a package forked from https://github.com/kensnyder/quill-image-resize-module/blob/master/demo/index.html, with just a bit of fixes:

  1. import Parchment from node_modules (instead of directly from window.Quill.imports)

const Parchment = window.Quill.imports.parchment;

to

import Parchment from 'parchment'

This solved the error:

"Cannot read property 'imports' of undefined"
  1. Edit some mistake in document

imageResize: { // See optional "config" below }

to

imageResize: {
    // See optional "config" below
}

重要訊息:

這個package原作者為https://github.com/kensnyder/quill-image-resize-module/blob/master/demo/index.html 我只修改了幾個部分:

  1. 修正了Parchment的引入方式,改為直接由node_modules引入

const Parchment = window.Quill.imports.parchment;

改為

import Parchment from 'parchment'

這解決了原套件發生的如下錯誤:

"Cannot read property 'imports' of undefined"
  1. 修正了一些document裡面的勘誤

imageResize: { // See optional "config" below }

改為

imageResize: {
    // See optional "config" below
}

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 ],
            // ...
        }
    }
});

Keywords

FAQs

Package last updated on 08 Jan 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc