{"_id":"quill-image-resize-module-ts","_rev":"1-ca8b3192cf60350927aeeba028663ef5","name":"quill-image-resize-module-ts","description":"A module for Quill rich text editor to allow images to be resized.","dist-tags":{"latest":"3.0.3"},"versions":{"3.0.3":{"name":"quill-image-resize-module-ts","version":"3.0.3","description":"A module for Quill rich text editor to allow images to be resized.","main":"dist/ImageResize.js","types":"dist/ImageResize.d.ts","scripts":{"test":"echo \"Error: no test specified\" && exit 1","release":"npm run lint && npm run build:ts","demo":"npm run release && npm run build:web","lint":"tslint --config tslint.json --project tsconfig.json","fixlint":"npm run lint --fix","build:ts":"tsc -p tsconfig.json","build:web":"webpack --config webpack.config.js -p"},"repository":{"type":"git","url":"git+https://github.com/kensnyder/quill-image-resize-module.git"},"keywords":["quill","quilljs","image","resize","sizer"],"author":{"name":"@kensnyder"},"contributors":[{"name":"Wikia","url":"https://github.com/Wikia"},{"name":"jonaskirkemyr","url":"https://github.com/jonaskirkemyr"}],"license":"MIT","bugs":{"url":"https://github.com/kensnyder/quill-image-resize-module/issues"},"homepage":"https://github.com/kensnyder/quill-image-resize-module#readme","devDependencies":{"@types/lodash":"^4.14.64","@types/node":"^7.0.18","@types/quill":"0.0.29","svg-inline-loader":"^0.7.1","ts-loader":"^3.2.0","tslint":"^5.3.2","typescript":"^2.6.2","webpack":"^3.10.0"},"dependencies":{"lodash":"^4.17.4","quill":"^1.3.4"},"gitHead":"23181bb7484f31107f611a04f87e63fd434303e3","_id":"quill-image-resize-module-ts@3.0.3","_npmVersion":"5.3.0","_nodeVersion":"8.6.0","_npmUser":{"name":"jonaskirkemyr","email":"jonas@kirkemyr.no"},"dist":{"integrity":"sha512-NMWw67zCfGxE0AyPTVLWMTAs71eKerd+jJJqu9ZuPBGZl7vc+Jtb+tmfx33pC3h0deVYqgOMXYzbFBIRmu/WuQ==","shasum":"47e6d81214719b7a745c2d4e53cad2cef09ad4dc","tarball":"https://registry.npmjs.org/quill-image-resize-module-ts/-/quill-image-resize-module-ts-3.0.3.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC591mj0F7SU2ERLQJoHXUbsJNUJmGqPICx4xPv2y5sdAiAMj/3v4hoMYqTLrI3cN0/UGS7Gq0TGPlKKla+TONiuiA=="}]},"maintainers":[{"name":"jonaskirkemyr","email":"jonas@kirkemyr.no"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/quill-image-resize-module-ts-3.0.3.tgz_1515100080660_0.054867374477908015"}}},"readme":"# Quill ImageResize Module\n\nA module for Quill rich text editor to allow images to be resized.\n\nAlso see [quill-image-drop-module](https://github.com/kensnyder/quill-image-drop-module),\na module that enables copy-paste and drag/drop for Quill.\n\n## Demo\n\n[Plunker](https://plnkr.co/edit/gq708AOrSBOWSlHcFslG?p=preview)\n\n## Usage\n\n### Webpack/ES6\n\n```javascript\nimport Quill from 'quill';\nimport { ImageResize } from 'quill-image-resize-module';\n\nQuill.register('modules/imageResize', ImageResize);\n\nconst quill = new Quill(editor, {\n    // ...\n    modules: {\n        // ...\n        imageResize: {\n            // See optional \"config\" below\n        }\n    }\n});\n```\n\n### TypeScript\n\n```ts\nimport * as Quill from 'quill';\nimport { ImageResize } from 'quill-image-resize-module';\n\nQuill.register('modules/imageResize', ImageResize);\n\nconst quill = new Quill(editor, {\n    // ...\n    modules: {\n        // ...\n        imageResize: {\n            // See optional \"config\" below\n        }\n    }\n});\n```\n\n### Script Tag\n\nCopy image-resize.min.js into your web root or include from node_modules\n\n```html\n<script src=\"/node_modules/quill-image-resize-module/image-resize.min.js\"></script>\n```\n\n```javascript\nvar quill = new Quill(editor, {\n    // ...\n    modules: {\n        // ...\n        ImageResize: {\n            // See optional \"config\" below\n        }\n    }\n});\n```\n\n### Config\n\nFor the default experience, pass an empty object, like so:\n```javascript\nvar quill = new Quill(editor, {\n    // ...\n    modules: {\n        // ...\n        ImageResize: {}\n    }\n});\n```\n\nFunctionality is broken down into modules, which can be mixed and matched as you like. For example,\nthe default is to include all modules:\n\n```javascript\nconst quill = new Quill(editor, {\n    // ...\n    modules: {\n        // ...\n        ImageResize: {\n            modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]\n        }\n    }\n});\n```\n\nEach module is described below.\n\n#### `Resize` - Resize the image\n\nAdds handles to the image's corners which can be dragged with the mouse to resize the image.\n\nThe look and feel can be controlled with options:\n\n```javascript\nvar quill = new Quill(editor, {\n    // ...\n    modules: {\n        // ...\n        ImageResize: {\n            // ...\n            handleStyles: {\n                backgroundColor: 'black',\n                border: 'none',\n                color: white\n                // other camelCase styles for size display\n            }\n        }\n    }\n});\n```\n\n#### `DisplaySize` - Display pixel size\n\nShows the size of the image in pixels near the bottom right of the image.\n\nThe look and feel can be controlled with options:\n\n```javascript\nvar quill = new Quill(editor, {\n    // ...\n    modules: {\n        // ...\n        ImageResize: {\n            // ...\n            displayStyles: {\n                backgroundColor: 'black',\n                border: 'none',\n                color: white\n                // other camelCase styles for size display\n            }\n        }\n    }\n});\n```\n\n#### `Toolbar` - Image alignment tools\n\nDisplays a toolbar below the image, where the user can select an alignment for the image.\n\nThe look and feel can be controlled with options:\n\n```javascript\nvar quill = new Quill(editor, {\n    // ...\n    modules: {\n        // ...\n        ImageResize: {\n            // ...\n            toolbarStyles: {\n                backgroundColor: 'black',\n                border: 'none',\n                color: white\n                // other camelCase styles for size display\n            },\n            toolbarButtonStyles: {\n                // ...\n            },\n            toolbarButtonSvgStyles: {\n                // ...\n            },\n        }\n    }\n});\n```\n\n#### `BaseModule` - Include your own custom module\n\nYou can write your own module by extending the `BaseModule` class, and then including it in\nthe module setup.\n\nFor example,\n\n```javascript\nimport { Resize, BaseModule } from 'quill-image-resize-module';\n\nclass MyModule extends BaseModule {\n    // See src/modules/BaseModule.js for documentation on the various lifecycle callbacks\n}\n\nvar quill = new Quill(editor, {\n    // ...\n    modules: {\n        // ...\n        ImageResize: {\n            modules: [ MyModule, Resize ],\n            // ...\n        }\n    }\n});\n```\n","maintainers":[{"name":"jonaskirkemyr","email":"jonas@kirkemyr.no"}],"time":{"modified":"2022-05-13T23:15:26.040Z","created":"2018-01-04T21:08:01.731Z","3.0.3":"2018-01-04T21:08:01.731Z"},"homepage":"https://github.com/kensnyder/quill-image-resize-module#readme","keywords":["quill","quilljs","image","resize","sizer"],"repository":{"type":"git","url":"git+https://github.com/kensnyder/quill-image-resize-module.git"},"contributors":[{"name":"Wikia","url":"https://github.com/Wikia"},{"name":"jonaskirkemyr","url":"https://github.com/jonaskirkemyr"}],"author":{"name":"@kensnyder"},"bugs":{"url":"https://github.com/kensnyder/quill-image-resize-module/issues"},"license":"MIT","readmeFilename":"README.md"}