Quill Image resize for Angular 2 quill module

Question

I am trying to use quill-image-resize-module for ngx-quill.I have installed ngx-quill and it is working fine. Now I need to resize the image inside the editor, so I am trying to use it. I found it here quill-image-resize-module

the problem is it is written in JavaScript and I am trying to use it in typescript file(Inside a component), So I got a compiler error.

As they have said that I have to import and register the ImageResize module But I am getting a compiler error while importing.

Can Anyone help me on using that module.

Thanks

Answer 1

As mentioned in the GitHub issue quill-image-resize-module does not work with angular 6 onwards. Instead, use https://github.com/Fandom-OSS/quill-blot-formatter. First, install this module via npm

npm install --save quill-blot-formatter

Then in your component -

    import Quill from 'quill';

    // from the index, which exports a lot of useful modules
    import BlotFormatter from 'quill-blot-formatter';

    // or, from each individual module
    import BlotFormatter from 'quill-blot-formatter/dist/BlotFormatter';

    Quill.register('modules/blotFormatter', BlotFormatter);

modules = {
    toolbar: {
      container:  [
        ['bold', 'italic', 'underline'],        // toggled buttons
        ['link', 'image', 'video']  ,           // link and image, video
      ],  // Selector for toolbar container
    },
    blotFormatter: {
      // empty object for default behaviour.
    }
    
  }

I got this working with [email protected], [email protected] and [email protected]

Answer 2

Hi i figure out how to make this work First of all make sure that you have this modules installed

npm install quill --save
npm install quill-image-resize-module --save

an then in angular.json add this

    "scripts": [
        ...,
        "../node_modules/quill/dist/quill.min.js"
    ]

then in your component.ts import Quill in this way

import * as QuillNamespace from 'quill';
let Quill: any = QuillNamespace;
import ImageResize from 'quill-image-resize-module';
Quill.register('modules/imageResize', ImageResize);

this.editor_modules = {
      toolbar: {
        container: [
          [{ 'font': [] }],
          [{ 'size': ['small', false, 'large', 'huge'] }],
          ['bold', 'italic', 'underline', 'strike'],
          [{ 'header': 1 }, { 'header': 2 }],
          [{ 'color': [] }, { 'background': [] }],
          [{ 'list': 'ordered' }, { 'list': 'bullet' }],
          [{ 'align': [] }],
          ['link', 'image']
        ]
      },
      imageResize: true
    };

Importing quill-image-resize-module in this way will work 100%, by the way I'm using Angular 7. If you have any question feel free to ask them, I will try to help you.

Answer 3

First, You cannot use Image-resize with angular-cli. You have to eject web pack from your angular-cli.

Use ng eject to create a webpack.config.js file

Inside the webpack.config.js file, somewhere at the top, paste

const webpack = require('webpack')

Check for the plugins array, at the end, add

new webpack.ProvidePlugin({
  'window.Quill': 'quill/dist/quill.js'
})

Don't forget to add the following to your index.html file

<link href="https://fonts.googleapis.com/css?family=Aref+Ruqaa|Mirza|Roboto" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.9.0-alpha1/katex.min.css" integrity="sha384-8QOKbPtTFvh/lMY0qPVbXj9hDh+v8US0pD//FcoYFst2lCIf0BmT58+Heqj0IGyx" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.9.0-alpha1/katex.min.js" integrity="sha384-GR8SEkOO1rBN/jnOcQDFcFmwXAevSLx7/Io9Ps1rkxWp983ZIuUGfxivlF/5f5eJ" crossorigin="anonymous"></script>

otherwise, the image-resize widget won't work.

refer to killerCodeMonkey's example

Sorry I can't provide you with a plunker or sth at the moment.