Table of Contents
Introduction
I am assuming you have followed Quill Editor For Angular. In my previous post I did not explain about ngx-quill image resize. So in this post I am going to explain about image resizing in quill js using angular.

Technology Required
Technology | Description |
---|---|
IDE or Editor | We'll use VS Code, |
Angular | We'll use Angular 9+. Assuming you have basic understanding on Angular |
TypeScript | Assuming you have knowledge on TypeScript |
Quill Js and ngx-quill | We'll use npm package for quill js |
Ngx-quill image resize Implementation
We have implemented basic editor in Quill Editor For Angular post. Now let’s import an image into the editor by clicking on image button.
Let’s try to resize the image by click on the image.
Wait… wait… we haven’t implemented resize functionality yet. Please follow below steps. 🙂
npm install quill-image-resize-module –save
Implement below code in app.component.ts file.
app.component.ts
import * as QuillNamespace from 'quill';
let Quill: any = QuillNamespace;
import ImageResize from 'quill-image-resize-module';
Quill.register('modules/imageResize', ImageResize);
And inside modules object add below key
imageResize: true // for image resize
app.component.ts (Complete code)
import { Component, ViewChild } from '@angular/core';
/**
* For Image resize
*/
import * as QuillNamespace from 'quill';
let Quill: any = QuillNamespace;
import ImageResize from 'quill-image-resize-module';
Quill.register('modules/imageResize', ImageResize);
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
@ViewChild('editor') editor;
htmlString: string = '';
quillEditorRef: any;
modules = {
toolbar: [
['bold', 'italic', 'underline', 'strike'], // toggled buttons
[{ 'header': 1 }, { 'header': 2 }], // custom button values
[{ 'list': 'ordered' }, { 'list': 'bullet' }],
[{ 'script': 'sub' }, { 'script': 'super' }], // superscript/subscript
[{ 'indent': '-1' }, { 'indent': '+1' }], // outdent/indent
[{ 'direction': 'rtl' }], // text direction
[{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme
[{ 'font': [] }],
[{ 'align': [] }],
['clean'], // remove formatting button
['link', 'image'], // link and image, video
],
imageResize: true // for image resize
};
onSelectionChanged = (event) => {}
onContentChanged = (event) => {
this.htmlString = event.html;
}
editorCreated(quill: any) {}
}
Output
Click on image and you can see some resizable component appeared, you can use those component to resize the image.
Conclusion
Using quill-image-resize-module package we can implement ngx-quill image resize functionality. It’s very easy and simple way to implement this functionality.
If you found this post useful, then please share this post with your friends and colleague.
Let us know in your comment if you found any difficulties during implementation.
Thank You. Have a great day 🙂
Nice tips, please visit
https://www.contohapps.com/2019/12/java-desktop-crud-create-read-update.html?m=1
Thank You
Yeeeee big thanks Bro
Thank You