benwinding / quill-image-compress

A Quill rich text editor Module which compresses images uploaded to the editor
https://benwinding.github.io/quill-image-compress/src/demo.html
MIT License
123 stars 30 forks source link

addHandler error when used with quill-view #7

Closed farkow closed 4 years ago

farkow commented 4 years ago

What happened I have successfully integrated quill-image-compress by using Angular >= 9. quill-editor is working as expected with the module. When it is globally enabled, and you try to use quill-view, following error occured.

core.js:6228 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'addHandler' of undefined TypeError: Cannot read property 'addHandler' of undefined at new t (quill.imageCompressor.min.js:1) at SnowTheme.addModule (quill.js:6130) at SnowTheme.addModule (quill.js:6774) at quill.js:6122 at Array.forEach (<anonymous>) at SnowTheme.init (quill.js:6120) at new Quill (quill.js:1163) at ngx-quill.js:756 at ZoneDelegate.invoke (zone-evergreen.js:364) at Zone.run (zone-evergreen.js:123) at resolvePromise (zone-evergreen.js:798) at zone-evergreen.js:705 at fulfilled (tslib.es6.js:71) at ZoneDelegate.invoke (zone-evergreen.js:364) at Object.onInvoke (core.js:41654) at ZoneDelegate.invoke (zone-evergreen.js:363) at Zone.run (zone-evergreen.js:123) at zone-evergreen.js:857 at ZoneDelegate.invokeTask (zone-evergreen.js:399) at Object.onInvokeTask (core.js:41632)

What to expect No interference by this module when using quill-view

More details

Piece of Source

app.module.ts import { QuillModule } from 'ngx-quill'; @NgModule({ declarations: [ ... ], imports: [ ..., QuillModule.forRoot({ theme: 'snow', modules: { imageResize: { debug: false, }, imageCompress: { quality: 0.7, maxWidth: 512, maxHeight: 512, imageType: 'image/jpeg', debug: true, }, imageDrop: true, } }), ], providers: [ ... ], bootstrap: [AppComponent] }) export class AppModule { } `

app.component.ts let Quill: any = QuillNamespace; Quill.register('modules/imageResize', ImageResize); Quill.register('modules/imageCompress', ImageCompress); Quill.register('modules/imageDrop', ImageDrop); Quill.register('modules/quillMobileView', mobileView.module);

angular.json ... "styles": [ "node_modules/bootstrap/dist/css/bootstrap.min.css", "node_modules/quill/dist/quill.core.css", "node_modules/quill/dist/quill.snow.css", "src/styles.css" ], "scripts": [ "node_modules/jquery/dist/jquery.min.js", "node_modules/popper.js/dist/umd/popper.min.js", "node_modules/bootstrap/dist/js/bootstrap.min.js", "node_modules/quill/dist/quill.min.js" ] ...

app.component.html <quill-editor #editor formControlName="short"></quill-editor> <quill-view [content]="data.short"></quill-view>

If you comment only ImageCompress, it is working without errors.

benwinding commented 4 years ago

Looks like that was caused by this line: https://github.com/benwinding/quill-image-compress/blob/6289e62739c86470373faec027e0065a0bb37504/src/quill.imageCompressor.js#L78-L79 Should be fixed now https://github.com/benwinding/quill-image-compress/blob/8ac9ef3ab9a5ee5686fe5f227951af04126642b2/src/quill.imageCompressor.js#L86-L91