Angular 7 installing quill-image-resize

Eyegabry99 commented 5 years ago

Hi i'm having some difficult for installing your image resizer plugin. I tried what is wrote here but it didn't work. I also searched for a solution from this repo but i couldn't find anything. Could give me some help installing the new plugin?

KillerCodeMonkey commented 5 years ago

for installing your image resizer plugin

i have no image resize plugin???

checkout my demo repo. it is used there ;-). It also worked with angular 7

KillerCodeMonkey commented 5 years ago

https://github.com/KillerCodeMonkey/ngx-quill-example/blob/e7b0c27dfa7f50f0dda89712575a14005135f7d5/src/app/formula/formula.component.ts

Eyegabry99 commented 5 years ago

@KillerCodeMonkey i saw, But when i try to do Quill.register(...) it give me the error quill.js:1122 Uncaught TypeError: Cannot read property 'register' of undefined

KillerCodeMonkey commented 5 years ago

then you have not installed quilljs correctly. I am using @types/quill there. and make sure you have quill correctly integrated https://github.com/KillerCodeMonkey/ngx-quill-example/blob/master/angular.json#L34

KillerCodeMonkey commented 5 years ago

And checkout the package.json that all deps are installed, e.g.:

"quill-image-resize": "^3.0.9",
"quill-image-resize-module": "^3.0.0",

Eyegabry99 commented 5 years ago

Ok solved. I was configuring quill from page.module.ts and it seems it doesn't work from that

Sangram9693 commented 4 years ago

Nice article for ngx quill image resizing

franconeilglovasa commented 3 years ago

Hi!

Im getting this error:

Uncaught TypeError: Cannot read properties of undefined (reading 'imports')
    at Object.<anonymous> (image-resize.min.js:1)
    at e (image-resize.min.js:1)
    at Object.<anonymous> (image-resize.min.js:1)
    at e (image-resize.min.js:1)
    at image-resize.min.js:1
    at image-resize.min.js:1
    at image-resize.min.js:1
    at Object.8807 (image-resize.min.js:1)
    at __webpack_require__ (bootstrap:19)
    at Module.5318 (task-info.component.html:117)

The standard ones works fine but the image resize wont work. This is what I did:

Run these ones:

npm install quill npm install ngx-quill npm install quill-image-resize-module

and then add these ones to package.json "quill-image-resize": "^3.0.9",

since "quill-image-resize-module": "^3.0.0", is already present

then do npm install.

Add these in app.module

import { QuillModule } from 'ngx-quill'

  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    HttpClientModule,
    FlexLayoutModule,
    MaterialModule,
    NgSelectModule,
    AuthModule.forRoot(),
    FormsModule,
    QuillModule.forRoot()
  ],

in the component.ts

import * as QuillNamespace from 'quill';
let Quill: any = QuillNamespace;
import ImageResize from 'quill-image-resize-module';
Quill.register('modules/imageResize', ImageResize);

export class MyComponent implements OnInit, OnDestroy {

  modules = {
    toolbar: [
    ['bold', 'italic', 'underline', 'strike'], // toggled buttons
    [{ 'header': 1 }, { 'header': 2 }], // custom button values
    [{ 'list': 'ordered' }, { 'list': 'bullet' }],
    [{ 'script': 'sub' }, { 'script': 'super' }], // superscript/subscript
    [{ 'indent': '-1' }, { 'indent': '+1' }], // outdent/indent
    [{ 'direction': 'rtl' }], // text direction
    [{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown
    [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
    [{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme
    [{ 'font': [] }],
    [{ 'align': [] }],
    ['clean'], // remove formatting button
    ['link', 'image'], // link and image, video
    ],
    imageResize: true // for image resize
    };

on html:

 <quill-editor  [(ngModel)]="taskData.issue" 
                    [modules]="modules"
                    (ngModelChange)="this.debouncedUpdate.next($event)">

                    </quill-editor>

What am I missing? Any advice can help.

Thanks

KillerCodeMonkey commented 3 years ago

checkout my demo repo. you can find the config here: https://github.com/KillerCodeMonkey/ngx-quill-example/blob/2e72dc75e6d9b423f67b57b17cc8fb527dd694e4/src/app/formula/formula.component.ts

hafnerpw commented 2 years ago

I have the same Issue. I checked your config and have tried to setup everything as in the demo but I'm getting same 'register import of undefined' error.

Can you please provide some kind of explanation ?

franconeilglovasa commented 2 years ago

It was fixed after I copied everything that is quill related from angular.json and styles.scss. I previously thought doing the npm install takes care of everything. Hope that helps.

Hamza965 commented 1 year ago

Hi!

Im getting this error:

Uncaught TypeError: Cannot read properties of undefined (reading 'imports')
    at Object.<anonymous> (image-resize.min.js:1)
    at e (image-resize.min.js:1)
    at Object.<anonymous> (image-resize.min.js:1)
    at e (image-resize.min.js:1)
    at image-resize.min.js:1
    at image-resize.min.js:1
    at image-resize.min.js:1
    at Object.8807 (image-resize.min.js:1)
    at __webpack_require__ (bootstrap:19)
    at Module.5318 (task-info.component.html:117)

The standard ones works fine but the image resize wont work. This is what I did:

Run these ones:

npm install quill npm install ngx-quill npm install quill-image-resize-module

and then add these ones to package.json "quill-image-resize": "^3.0.9",

since "quill-image-resize-module": "^3.0.0", is already present

then do npm install.

Add these in app.module

import { QuillModule } from 'ngx-quill'

  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    HttpClientModule,
    FlexLayoutModule,
    MaterialModule,
    NgSelectModule,
    AuthModule.forRoot(),
    FormsModule,
    QuillModule.forRoot()
  ],

in the component.ts

import * as QuillNamespace from 'quill';
let Quill: any = QuillNamespace;
import ImageResize from 'quill-image-resize-module';
Quill.register('modules/imageResize', ImageResize);

export class MyComponent implements OnInit, OnDestroy {

  modules = {
    toolbar: [
    ['bold', 'italic', 'underline', 'strike'], // toggled buttons
    [{ 'header': 1 }, { 'header': 2 }], // custom button values
    [{ 'list': 'ordered' }, { 'list': 'bullet' }],
    [{ 'script': 'sub' }, { 'script': 'super' }], // superscript/subscript
    [{ 'indent': '-1' }, { 'indent': '+1' }], // outdent/indent
    [{ 'direction': 'rtl' }], // text direction
    [{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown
    [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
    [{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme
    [{ 'font': [] }],
    [{ 'align': [] }],
    ['clean'], // remove formatting button
    ['link', 'image'], // link and image, video
    ],
    imageResize: true // for image resize
    };

on html:

 <quill-editor  [(ngModel)]="taskData.issue" 
                    [modules]="modules"
                    (ngModelChange)="this.debouncedUpdate.next($event)">

                    </quill-editor>

What am I missing? Any advice can help.

Thanks

You can solve this error by adding this script in index file:

KillerCodeMonkey / ngx-quill

Angular 7 installing quill-image-resize #639