# quill-image-resize-module--fix-imports-error > A module for Quill rich text editor to allow images to be resized. And fix some error Latest version **3.0.0** (published 2020-01-08) · MIT license · 0 weekly downloads ## Install ```sh npm install quill-image-resize-module--fix-imports-error pnpm add quill-image-resize-module--fix-imports-error yarn add quill-image-resize-module--fix-imports-error bun add quill-image-resize-module--fix-imports-error ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 3.0.0 | | Published | 2020-01-08 | | First published | 2020-01-08 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 3 | | Unpacked size | 255.4 KB | | Known vulnerabilities | 0 (+1 in 1 direct dependencies) | | Install scripts | no | | GitHub stars | 0 | | Author | @JohnH | | Maintainers | a0972199950 | | Keywords | quill, quilljs, image, resize, sizer | ## Links - npm: https://www.npmjs.com/package/quill-image-resize-module--fix-imports-error - Repository: https://github.com/a0972199950/quill-image-resize-module - Homepage: https://github.com/a0972199950/quill-image-resize-module#readme - Issues: https://github.com/a0972199950/quill-image-resize-module/issues - npm.io page: https://npm.io/package/quill-image-resize-module--fix-imports-error ## Dependencies (3) - [quill](https://npm.io/package/quill.md) ^1.2.2 - [lodash](https://npm.io/package/lodash.md) ^4.17.4 - [raw-loader](https://npm.io/package/raw-loader.md) ^0.5.1 ## Alternatives - [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads - [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads - [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads - [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads - [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads ## Recent versions - 3.0.0 (latest) — 2020-01-08 ## README # IMPORTANT NOTE: It's a package forked from [https://github.com/kensnyder/quill-image-resize-module/blob/master/demo/index.html](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" ``` 2. 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](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" ``` 2. 修正了一些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](https://github.com/kensnyder/quill-image-drop-module), a module that enables copy-paste and drag/drop for Quill. ## Demo [Plunker](https://plnkr.co/edit/gq708AOrSBOWSlHcFslG?p=preview) ## Usage ### Webpack/ES6 ```javascript 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 ```html ``` ```javascript var quill = new Quill(editor, { // ... modules: { // ... imageResize: { // See optional "config" below } } }); ``` ### Config For the default experience, pass an empty object, like so: ```javascript 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: ```javascript 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: ```javascript 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: ```javascript 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: ```javascript 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, ```javascript 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 ], // ... } } }); ``` --- _Source: https://npm.io/package/quill-image-resize-module--fix-imports-error · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._