Ngx-quill Image Resize With Easy Example Using Angular 9

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 🙂