### Install quill-resize-image with yarn
Source: https://github.com/hunghg255/quill-resize-image/blob/master/README.md
Use this command to install the latest version of the library with yarn.
```bash
yarn add quill-resize-image
```
--------------------------------
### Install quill-resize-image with npm
Source: https://github.com/hunghg255/quill-resize-image/blob/master/README.md
Use this command to install the latest version of the library.
```bash
npm i quill-resize-image@latest
```
--------------------------------
### Example Resize Options: Images Only, Spanish Labels
Source: https://context7.com/hunghg255/quill-resize-image/llms.txt
An example demonstrating how to configure QuillResizeImageOptions for specific use cases, such as enabling only image resizing, setting custom size constraints, and localizing labels to Spanish.
```typescript
// Example — images only, fixed max width, Spanish labels:
const resizeOptions: QuillResizeImageOptions = {
locale: {
floatLeft: 'Izquierda',
floatRight: 'Derecha',
center: 'Centro',
restore: 'Auto',
altTip: '¡Mantén Alt para bloquear la relación de aspecto!',
inputTip: 'Pulsa Enter para aplicar',
},
keepAspectRatio: true,
resizeConstraints: { minWidth: 80, maxWidth: 960 },
disableMediaTypes: {
disableVideos: true,
disableIframes: true,
},
};
```
--------------------------------
### Browser/CDN Usage with Vanilla Script Tag
Source: https://context7.com/hunghg255/quill-resize-image/llms.txt
Loads the UMD bundle from a CDN and registers the module globally. No build step is required for this setup.
```html
Quill Resize Image Demo
Hello World!
```
--------------------------------
### Initialize Quill with Resize Module
Source: https://context7.com/hunghg255/quill-resize-image/llms.txt
Register the QuillResizeImage module and configure its options within a ReactQuill component. This setup enables interactive resizing for images and videos.
```typescript
import ReactQuill, { Quill } from 'react-quill';
import QuillResizeImage from 'quill-resize-image';
Quill.register("modules/resize", QuillResizeImage);
const App = () => {
const modules = {
toolbar: {
container: [['bold', 'italic', 'image', 'video']],
},
resize: {
// locale: override toolbar button labels
locale: {
floatLeft: 'Left',
floatRight: 'Right',
center: 'Center',
restore: 'Auto',
altTip: 'Hold Alt to lock aspect ratio!',
inputTip: 'Press Enter to apply',
},
// keepAspectRatio: always lock height proportionally when dragging
keepAspectRatio: false,
// resizeConstraints: clamp pixel dimensions during drag
resizeConstraints: {
minWidth: 50,
maxWidth: 800,
minHeight: 50,
maxHeight: 600,
},
// disableMediaTypes: opt-out specific element types
disableMediaTypes: {
disableImages: false,
disableVideos: false,
disableIframes: false,
},
},
};
return (
);
};
```
--------------------------------
### Initialize Quill with Resize Module
Source: https://github.com/hunghg255/quill-resize-image/blob/master/demo/index.html
This code initializes the Quill editor, registers the resize module, and sets up event listeners for text changes. It saves content to local storage and updates a preview element.
```javascript
document.addEventListener('DOMContentLoaded', function () { if (!window.QuillResizeImage ) return; Quill.register("modules/resize", window.QuillResizeImage);
var toolbarOptions = [
"bold", "italic", "underline", "strike", "image", "video"
];
var quill = new Quill("#editor", {
theme: "snow",
modules: {
toolbar: toolbarOptions,
resize: {
locale: {},
},
},
});
quill.on("text-change", (a, b, c) => {
localStorage.setItem("content", quill.root.innerHTML);
document.getElementById("prev").innerHTML = quill.scroll.domNode.innerHTML;
});
const content = localStorage.getItem("content");
if (content) {
quill.root.innerHTML = content;
}
})
```
--------------------------------
### QuillResizeImage(quill, options) — Module entry point
Source: https://context7.com/hunghg255/quill-resize-image/llms.txt
The main module function, registered with Quill via `Quill.register("modules/resize", QuillResizeImage)`. It attaches click listeners to the editor root to intercept clicks on ``, `