Ngx-quill: Image Resize and Drop modules

[mrcl]

There are 2 Quill modules which are very useful.

https://github.com/kensnyder/quill-image-resize-module
https://github.com/kensnyder/quill-image-drop-module

How can they be integrated to ngx-quill?

[KillerCodeMonkey]

follow the usage guide?
https://github.com/kensnyder/quill-image-resize-module#usage

pass the modules config to the modules input of ngx-quill --> see the readme

another approach would be to listen on OnEditorCreated Output and add the modules to the editor instance after ngx-quill instantiated the editor.

Nothing special. simple default Quill behave ;)

https://quilljs.com/docs/modules/
https://quilljs.com/guides/building-a-custom-module/

Here is an example repo for ngx-quill:
https://github.com/KillerCodeMonkey/ngx-quill-example/blob/master/src/app.component.ts

there you can find an example how to integrate a custom module (word counter module)
https://killercodemonkey.github.io/ngx-quill-example/ (the last editor ;))

[sharifnascenia]

Hello KillerCodeMonkey,
First, sorry for asking these stupid question, But I am really stuck with that.

I am trying to use this 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.
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 the documentation have said that I have to import and register the ImageResize module But I am getting a compiler error while importing.

Can you please help me on using that module?
Thanks

[KillerCodeMonkey]

Follow this guide: https://github.com/kensnyder/quill-image-resize-module/issues/7#issuecomment-304463415

the modules quill-image-resize and -drop are expecting that quill js is globally available... sadly

[deepakpapola]

@KillerCodeMonkey
hey can you share the code?
im stuck with image-resize

[KillerCodeMonkey]

i have no code on my own.

If you are using webpack --> add this to your plugins:

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

And then follow the image-resize guide.

[deepakpapola]

@KillerCodeMonkey thanx for response but im not using webpack

[KillerCodeMonkey]

yeah then check out systemjs documentation. there you have to add imageresize module to you packages.

But this is more a question you should ask in the repository of the image resizing module.

Check my readme, how i configure ngx-quill and quill with systemjs and check if you can expose quill globally with systemjs.

and in other cases please add a demo repo, where i can check your code and config.

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

[nguyenthanhcong101096]

h1