Skip to content
Menu
Almighty tricks
  • About
  • Contact
Almighty tricks
ngx-quill image resize

Ngx-quill image resize with easy example using angular 9

Posted on October 21, 2020October 28, 2020
Facebook0Tweet0LinkedIn0Email0

Table of Contents

  • Introduction
  • Technology Required
  • Ngx-quill image resize Implementation
    • app.component.ts
    • app.component.ts (Complete code)
    • Output
  • Conclusion

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.

ngx-quill image resize
ngx-quill image resize

Technology Required

TechnologyDescription
IDE or EditorWe'll use VS Code,
Angular We'll use Angular 9+. Assuming you have basic understanding on Angular
TypeScriptAssuming you have knowledge on TypeScript
Quill Js and ngx-quillWe'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.

import image

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.

resize image done

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 🙂

Facebook0Tweet0LinkedIn0Email0

4 thoughts on “Ngx-quill image resize with easy example using angular 9”

  1. jajangtea says:
    October 23, 2020 at 6:31 am

    Nice tips, please visit
    https://www.contohapps.com/2019/12/java-desktop-crud-create-read-update.html?m=1

    Reply
    1. Sangram Badi says:
      October 27, 2020 at 2:20 pm

      Thank You

      Reply
  2. Dheeraj says:
    October 27, 2020 at 3:48 pm

    Yeeeee big thanks Bro

    Reply
    1. Sangram Badi says:
      October 28, 2020 at 3:45 am

      Thank You

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recent Posts

  • Build python flask rest api with example | python tutorial 1
  • Code highlighting using ngx-quill with easy example in angular 9
  • Ngx-quill image resize with easy example using angular 9
  • Free WYSIWYG Editor For Angular 9+ (quill js / ngx-quill)
  • Fix 404 page not found error in Angular/React/Vue for production
©2021 Almighty tricks | Powered by SuperbThemes & WordPress
Share this ArticleLike this article? Email it to a friend!

Email sent!