{"_id":"@ammarkhalidfarooq/quill-image-resize-module-withfix","name":"@ammarkhalidfarooq/quill-image-resize-module-withfix","dist-tags":{"latest":"4.1.1"},"versions":{"4.1.1":{"name":"@ammarkhalidfarooq/quill-image-resize-module-withfix","version":"4.1.1","private":false,"description":"A module for Quill rich text editor to allow images to be resized.","main":"image-resize.min.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1","release":"webpack -p --progress --colors","dev":"webpack --progress --colors --watch","lint":"eslint --ext js,es6 src","fixlint":"eslint --fix --ext js,es6 src"},"repository":{"type":"git","url":"git+https://github.com/Ace217/quill-image-resize-module.gits.git"},"keywords":["quill","quilljs","image","resize","sizer"],"author":{"name":"@kensnyder"},"contributors":[{"name":"Wikia","url":"https://github.com/Wikia"},{"name":"Srinath","url":"https://github.com/vjsrinath"}],"license":"MIT","bugs":{"url":"https://github.com/lyuehh/quill-image-resize-module/issues"},"homepage":"https://github.com/lyuehh/quill-image-resize-module#readme","devDependencies":{"babel-cli":"^6.24.0","babel-eslint":"^7.2.1","babel-loader":"^6.4.1","babel-plugin-transform-class-properties":"^6.23.0","babel-preset-env":"^1.2.2","babel-preset-es2015":"^6.24.0","eslint":"^3.19.0","eslint-config-airbnb":"^14.1.0","eslint-plugin-import":"^2.2.0","eslint-plugin-jsx-a11y":"^4.0.0","eslint-plugin-react":"^6.10.3","webpack":"^2.3.3"},"dependencies":{"lodash":"^4.17.4","quill":"^1.2.2","raw-loader":"^0.5.1"},"gitHead":"8b951c19949ee712d4cdb9070b0f7e1669f671d0","_id":"@ammarkhalidfarooq/quill-image-resize-module-withfix@4.1.1","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-o9OA9Bt66iPheGbCATFntw8PtNs0Dl7UfOMD35yzKH/cWRvAX1TCnZN/TxVkXtddLfSNxjGr4AVhYYUbp51hoA==","shasum":"2a966029f880458c5808b4af426ca99bda0d34bf","tarball":"https://registry.npmjs.org/@ammarkhalidfarooq/quill-image-resize-module-withfix/-/quill-image-resize-module-withfix-4.1.1.tgz","fileCount":16,"unpackedSize":257889,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD786dH/+/AHrufjeY2L+ZO9YgcgdTToWR/Sb2gerxOUQIgMaJDBYFT96y/Ss3r8Jy6QmiKgRZjGGW8nIGAWfNlORw="}]},"_npmUser":{"name":"ammarkhalidfarooq","email":"ammarkfarooq@hotmail.com"},"directories":{},"maintainers":[{"name":"ammarkhalidfarooq","email":"ammarkfarooq@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/quill-image-resize-module-withfix_4.1.1_1711344911136_0.7422352086723547"},"_hasShrinkwrap":true}},"time":{"created":"2024-03-25T05:35:11.062Z","4.1.1":"2024-03-25T05:35:11.365Z","modified":"2024-03-25T05:35:11.882Z"},"maintainers":[{"name":"ammarkhalidfarooq","email":"ammarkfarooq@hotmail.com"}],"description":"A module for Quill rich text editor to allow images to be resized.","homepage":"https://github.com/lyuehh/quill-image-resize-module#readme","keywords":["quill","quilljs","image","resize","sizer"],"repository":{"type":"git","url":"git+https://github.com/Ace217/quill-image-resize-module.gits.git"},"contributors":[{"name":"Wikia","url":"https://github.com/Wikia"},{"name":"Srinath","url":"https://github.com/vjsrinath"}],"author":{"name":"@kensnyder"},"bugs":{"url":"https://github.com/lyuehh/quill-image-resize-module/issues"},"license":"MIT","readme":"# Quill ImageResize Module\r\n\r\nA module for Quill rich text editor to allow images to be resized.\r\n\r\nAlso see [quill-image-drop-module](https://github.com/kensnyder/quill-image-drop-module),\r\na module that enables copy-paste and drag/drop for Quill.\r\n\r\n## Demo\r\n\r\n[Plunker](https://plnkr.co/edit/gq708AOrSBOWSlHcFslG?p=preview)\r\n\r\n## Usage\r\n\r\n### Webpack/ES6\r\n\r\n```javascript\r\nimport Quill from 'quill';\r\nimport { ImageResize } from 'quill-image-resize-module-withfix';\r\n\r\nQuill.register('modules/imageResize', ImageResize);\r\n\r\nconst quill = new Quill(editor, {\r\n    // ...\r\n    modules: {\r\n        // ...\r\n        imageResize: {\r\n            // See optional \"config\" below\r\n        }\r\n    }\r\n});\r\n```\r\n\r\n### Script Tag\r\n\r\nCopy image-resize.min.js into your web root or include from node_modules\r\n\r\n```html\r\n<script src=\"/node_modules/quill-image-resize-module-withfix/image-resize.min.js\"></script>\r\n```\r\n\r\n```javascript\r\nvar quill = new Quill(editor, {\r\n    // ...\r\n    modules: {\r\n        // ...\r\n        ImageResize: {\r\n            // See optional \"config\" below\r\n        }\r\n    }\r\n});\r\n```\r\n\r\n### Config\r\n\r\nFor the default experience, pass an empty object, like so:\r\n```javascript\r\nvar quill = new Quill(editor, {\r\n    // ...\r\n    modules: {\r\n        // ...\r\n        ImageResize: {}\r\n    }\r\n});\r\n```\r\n\r\nFunctionality is broken down into modules, which can be mixed and matched as you like. For example,\r\nthe default is to include all modules:\r\n\r\n```javascript\r\nconst quill = new Quill(editor, {\r\n    // ...\r\n    modules: {\r\n        // ...\r\n        ImageResize: {\r\n            modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]\r\n        }\r\n    }\r\n});\r\n```\r\n\r\nEach module is described below.\r\n\r\n#### `Resize` - Resize the image\r\n\r\nAdds handles to the image's corners which can be dragged with the mouse to resize the image.\r\n\r\nThe look and feel can be controlled with options:\r\n\r\n```javascript\r\nvar quill = new Quill(editor, {\r\n    // ...\r\n    modules: {\r\n        // ...\r\n        ImageResize: {\r\n            // ...\r\n            handleStyles: {\r\n                backgroundColor: 'black',\r\n                border: 'none',\r\n                color: white\r\n                // other camelCase styles for size display\r\n            }\r\n        }\r\n    }\r\n});\r\n```\r\n\r\n#### `DisplaySize` - Display pixel size\r\n\r\nShows the size of the image in pixels near the bottom right of the image.\r\n\r\nThe look and feel can be controlled with options:\r\n\r\n```javascript\r\nvar quill = new Quill(editor, {\r\n    // ...\r\n    modules: {\r\n        // ...\r\n        ImageResize: {\r\n            // ...\r\n            displayStyles: {\r\n                backgroundColor: 'black',\r\n                border: 'none',\r\n                color: white\r\n                // other camelCase styles for size display\r\n            }\r\n        }\r\n    }\r\n});\r\n```\r\n\r\n#### `Toolbar` - Image alignment tools\r\n\r\nDisplays a toolbar below the image, where the user can select an alignment for the image.\r\n\r\nThe look and feel can be controlled with options:\r\n\r\n```javascript\r\nvar quill = new Quill(editor, {\r\n    // ...\r\n    modules: {\r\n        // ...\r\n        ImageResize: {\r\n            // ...\r\n            toolbarStyles: {\r\n                backgroundColor: 'black',\r\n                border: 'none',\r\n                color: white\r\n                // other camelCase styles for size display\r\n            },\r\n            toolbarButtonStyles: {\r\n                // ...\r\n            },\r\n            toolbarButtonSvgStyles: {\r\n                // ...\r\n            },\r\n        }\r\n    }\r\n});\r\n```\r\n\r\n#### `BaseModule` - Include your own custom module\r\n\r\nYou can write your own module by extending the `BaseModule` class, and then including it in\r\nthe module setup.\r\n\r\nFor example,\r\n\r\n```javascript\r\nimport { Resize, BaseModule } from 'quill-image-resize-module-withfix';\r\n\r\nclass MyModule extends BaseModule {\r\n    // See src/modules/BaseModule.js for documentation on the various lifecycle callbacks\r\n}\r\n\r\nvar quill = new Quill(editor, {\r\n    // ...\r\n    modules: {\r\n        // ...\r\n        ImageResize: {\r\n            modules: [ MyModule, Resize ],\r\n            // ...\r\n        }\r\n    }\r\n});\r\n```\r\n","readmeFilename":"README.md"}