Quill Image resize for Angular 2 quill module

quill-image-resize-module
ngx-quill
react-quill-image-resize
quill image handler
quill-image size limit
ngx-quill custom toolbar
quill-example
quill editor - stackblitz

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

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 angular@7.2.5, angular-cli@7.3.2 and ngx-quill@4.6.11

quill-image-resize-module, A module for Quill rich text editor to allow images to be resized. Copy image- resize.min.js into your web root or include from node_modules. People who are having difficulty using the quill image resize module with ANGULAR-CLI and ANGULAR 2+ Here's a way to not have to tinker with the webpack.config.ts file. terminal. npm install quill --save npm install quill-image-resize-module --save angular-cli.json "scripts": [ , "../node_modules/quill/dist/quill.min.js" ] Componente.ts

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.

Register Image Resize using Angular 4 · Issue #27 · kensnyder/quill , \/quill-image-drop-module|quill-image-resize-module)/, loader: 'babel-loader', query: {} } to the modules in webpack.config.js file. and the i  Quill ImageResize Module. A module for Quill rich text editor to allow images to be resized. Also see quill-image-drop-module, a module that enables copy-paste and drag/drop for Quill. Demo. Plunker. Usage Webpack/ES6

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.

image resizing · Issue #93 · KillerCodeMonkey/ngx-quill · GitHub, Hi, Can image resizing be implemented? who are having difficulty using the quill image resize module with ANGULAR-CLI e ANGULAR 2+ ngx-quill is an angular (>=2) module for the Quill Rich Text Editor containing all components you need. Donate/Support. If you like my work, feel free to support it. Donations to the project are always welcomed :) Examples. Advanced Demo. integration of quill-emoji; integration of quill-mention; integration of quill-image-resize; custom word

I am using angular/cli 6.0.0, quill-image-resize 3.0.9 and quill-image-resize-module 3.0.0.

The following changes made it work:

angular.json

"architect": {
            "build": {
                "builder": "@angular-builders/custom-webpack:browser",
                "options": {
                    "customWebpackConfig": {
                       "path": "./extra-webpack.config.js",
                       "replaceDuplicatePlugins": true
                    },
                    "styles": [
                        "node_modules/quill/dist/quill.core.css", 
                        "node_modules/quill/dist/quill.snow.css"
                    ],
                    "scripts": [
                        "./node_modules/quill/dist/quill.min.js"
                    ]

extra-webpack.config.js

var webpack = require("webpack");
var path = require("path");

module.exports = {
  resolve: {
  },
  plugins: [
    new webpack.ProvidePlugin({
        'window.Quill': 'quill/dist/quill.js',
        'window.quill': 'quill/dist/quill.js'
    })
  ]
}

Main.ts

import Quill from 'quill';
import ImageResize from 'quill-image-resize-module'; 
Quill.register('modules/imageResize', ImageResize);

function _window() : any {
    return window;
}


_window().Quill = Quill;
_window().quill = Quill;

And as mentioned by lordUhuru, I added

<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>

to my index.html

I am not sure if all steps are required. I am still playing around with it.

Quill Image resize for Angular 2 quill module - angular - html, 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  People who are having difficulty using the quill image resize module with ANGULAR-CLI e ANGULAR 2+ Here's a way to not have to tinker with the webpack.config.ts file. terminal. npm install quill --save npm install quill-image-resize-module --save angular-cli.json "scripts": [ , "../node_modules/quill/dist/quill.min.js" ] Componente.ts

The problem is is the way the module is imported, and it will work in Angular 9 Ivy even, depending on your compiler options in tsconfig.json. Add:

"noImplicitAny": false

This will also fix the same problem with the ImageDrop module.

Also, check out all the new fixes in the new version with ngx-quill.

Package, People who are having difficulty using the quill image resize module with ANGULAR-CLI and ANGULAR 2+ Here's a way to not have to tinker with the  People who are having difficulty using the quill image resize module with ANGULAR-CLI e ANGULAR 2+ Here's a way to not have to tinker with the webpack.config.ts file. terminal. npm install quill --save npm install quill-image-resize-module --save angular-cli.json "scripts": [ , "../node_modules/quill/dist/quill.min.js" ] Componente.ts

quill-example, from '@angular/core';. import ImageResize from. 'quill-image-resize-module';. declare const Quill: any;. debugger;. Quill.register('modules/imageResize',. import {ImageResize} from 'quill-image-resize-module'; import * as Quill from 'quill'; Quill. register ('modules/imageResize', ImageResize); The log given by the failure. Desired functionality.

Angular + Typescript Demo Plunk, AngularVersionForThisPlunker = 'latest' </script> <title>angular playground</title > <link 'quill': 'npm:quill@1.2.6/dist/quill.js', 'quill-image-resize-module':  use <quill-editor></quill-editor> in your templates to add a default quill editor; do not forget to include quill + theme css in your buildprocess, module or index.html! for builds with angular-cli >=6 only add quilljs to your scripts or scripts section of angular.json, if you need it as a global :)!

Quill Image Resize Module - Demo, <h1>Quill Image Resize Module - Demo</h1>. 2. <a href="https://github.com/ kensnyder/quill-image-resize-module">Quill ImageResize Module</a>. 3. <br/>< br/>. Quill Image resize for Angular 2 quill module. This comment has been minimized. Sign in to view. Copy link Quote reply vibingopal commented Apr 3, 2018. I am able to

Comments
  • This is actually a very good answer. However, It will only resize the first element. Even though it resizes all images, it doesn't really stay like that, unless refreshing the page and doing it again. Did you face any issues with caching?
  • Have you done server side rendering in Angular using quill image resize?
  • Not yet, but if you'll do it feel free to share with us :)
  • still doesnt work getting this error TypeError: Cannot read property 'parchment' of undefined