Ngx-quill: Registration of quill-image-resize-module fails

[GKanitz]

I have been trying to register an image resize module (https://github.com/kensnyder/quill-image-resize-module) with Quill. But as soon as Quill.register('modules/imageResize', ImageResize); is called, I get the following error: TypeError: Cannot read property 'imports' of undefined

I created a plunker that shows the issue:
https://plnkr.co/edit/IrSndtpRKSXG324zArN7?p=preview

I don't really know if this is really an issue or if I'm simply mistaking something in the configuration. I have had a look at the examples provided and other issues but have not been able to resolve this problem. Hence, any help would be deeply appreciated as the ability to resize images is something quite handy to have.

Thank you very much.

[KillerCodeMonkey]

Did you checked this issue in the repo:
https://github.com/kensnyder/quill-image-resize-module/issues/7#issuecomment-304463415

[GKanitz]

Ok, this did the trick.
Thank you for the help and the great work.

[agam16]

HI @GKanitz @KillerCodeMonkey How did you resolve the issue. Can you show me some code how to fix it. I have tried it but where would i import the Quill.

[KillerCodeMonkey]

Checkout my ngx-quill-example repo. In the app.component.ts you See example
how to Register other modules in quill (how to import everything).

The Problem with the image-resize-module is that it need Quill AS a global
var (in the window object, which is not a good style). So in my last
comment above is the link for the solution to get this working with webpack.

Am 24.12.2017 11:12 nachm. schrieb "agam16" [e-mail]:

HI @GKanitz https://github.com/gkanitz @KillerCodeMonkey
https://github.com/killercodemonkey How did you resolve the issue. Can
you show me some code how to fix it. I have tried it but where would i
import the Quill.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/KillerCodeMonkey/ngx-quill/issues/48#issuecomment-353805182,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACKOYEHCRGPRqqEPGL6b8VVN2HWyqUAtks5tDsxZgaJpZM4OLemj
.

[agam16]

@KillerCodeMonkey i am not using any js loader. Do i need to use it. Sorry i am a naive in webpack. Thanks for your help.

[viniciusaugutis]

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

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

Componente.html
<quill-editor [modules]="editor_modules" [(ngModel)]="content"></quill-editor>