Ngx-quill: image resizing

[gbourda]

Hi,

Can image resizing be implemented?

Perhaps with this module? https://github.com/kensnyder/quill-image-resize-module

[KillerCodeMonkey]

search this repos issues ;)

as a hint --> check out my ngx-quill-example repo. There is an live example --> checkout the "Formula & image resize editor" example ;)

https://github.com/KillerCodeMonkey/ngx-quill-example/blob/be4036489cd670b8c9db8729997d878af799bf21/src/app.component.ts#L12

Checkout the webpack.config --> you need to provide Quill as global in your project, because this image resize module required it.

https://github.com/KillerCodeMonkey/ngx-quill/issues/88#issuecomment-354960976

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

[ebadia]

@viniciusaugutis I'm doing what you suggest but receive a quill Cannot import modules/imageResize. Are you sure it was registered? message, and it does not work. Can you please explain a little bit more to see if there's something that can help make imagerisize work? Thanks!!!

[KillerCodeMonkey]

Checkout the other Image resize issue here or checkout Image resize Repo
issues. There are lots of this issues and solutions ;)

Enric Badia [e-mail] schrieb am Sa., 14. Juli 2018, 13:39:

@viniciusaugutis https://github.com/viniciusaugutis I'm doing what you
suggest but receive a quill Cannot import modules/imageResize. Are you
sure it was registered? message, and it does not work. Can you please
explain a little bit more to see if there's something that can help make
imagerisize work? Thanks!!!

—
You are receiving this because you modified the open/close state.
Reply to this email directly, view it on GitHub
https://github.com/KillerCodeMonkey/ngx-quill/issues/93#issuecomment-405017623,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACKOYEXyhYzDWsqEKNgqkJ78BfJuDwsOks5uGdh-gaJpZM4RWM_W
.

[deshario]

@ebadia you should import n write config on app.config.js to make it work

[FernandoFHS]

@viniciusaugutis Worked perfectly! Except for mobile, I believe because of the touch. How to solve this?

[Sangram9693]

Nice article for ngx quill image resizing