CODEWITHSUNDEEP
angular
Sharif Rifat
Sharif Rifat

Reputation: 131

Quill Image resize for Angular 2 quill module

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

Upvotes: 9

Views: 10217

Answers (6)

Arturo Castro
Arturo Castro

Reputation: 311

I used jQuery to solve this:

const videos = $('iframe.ql-video);
videos.attr("width","853");
videos.attr("height","480");

Works fine.

Upvotes: 0

Darshan Devrai
Darshan Devrai

Reputation: 576

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]

Upvotes: 11

Jonathan
Jonathan

Reputation: 4689

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.

Upvotes: 0

Stefan Morcodeanu
Stefan Morcodeanu

Reputation: 2158

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.

Upvotes: 5

Michael
Michael

Reputation: 448

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.

Upvotes: 0

lordUhuru
lordUhuru

Reputation: 197

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.

Upvotes: 2

Related Questions