ckeditor5-angular icon indicating copy to clipboard operation
ckeditor5-angular copied to clipboard

Error when upgrade Angular!

Open Dev199x opened this issue 4 years ago • 5 comments

Hi! I got the error with ckEditor when upgrade Angular. How Can I fix it? Thank you!

ERROR Error: Uncaught (in promise): TypeError: e is not a constructor 
TypeError: e is not a constructorat 8993.js:2181
at Array.map ()
at 8993.js:2181
at Xi.init (8993.js:2181)
at Ew.initPlugins (8993.js:2181)
at 8993.js:2181
at new ZoneAwarePromise (polyfills.js:11552)
at Function.create (8993.js:2181)
at CKEditorComponent. (8993.js:1977)
at Generator.next ()at resolvePromise (polyfills.js:11378)
at resolvePromise (polyfills.js:11332)
at polyfills.js:11444
at ZoneDelegate.invokeTask (polyfills.js:10571)
at Object.onInvokeTask (vendor.js:60968)
at ZoneDelegate.invokeTask (polyfills.js:10570)
at Zone.runTask (polyfills.js:10343)
at drainMicroTaskQueue (polyfills.js:10747)

Dev199x avatar Aug 04 '21 04:08 Dev199x

Hi, could you please share some more details (editor configuration, steps to reproduce the error, etc.)?

FilipTokarski avatar Aug 04 '21 07:08 FilipTokarski

I added new plugin to config.ExtraPlugin and it caused an error :((

Dev199x avatar Aug 05 '21 09:08 Dev199x

If you want to use a custom editor with Angular, you cannot just add plugins like in a standalone editor. As the Angular component documentation says:

Currently, the CKEditor 5 component for Angular supports integrating CKEditor 5 only via builds. Integrating CKEditor 5 built from source is not possible yet due to the lack of ability to adjust Webpack configuration in angular-cli.

So to use a custom editor with Angular, you first need to create a standalone build and then integrate it into the Angular app. You have a few options here. The easiest and fastest is to use Online Builder. Apart from that you can create editor following creating custom build guide or quick start guide. You might also be interested in installing plugins guide.

FilipTokarski avatar Aug 06 '21 12:08 FilipTokarski

Ok I get it, so this code, extraPlugins: [(editor: any) => {return this.imagePluginFactory (editor)}], public imagePluginFactory (editor: any): void { editor.plugins.get ('FileRepository') .createUploadAdapter = (loader: any) => { return new UploadAdapter (this.apiserver.serverPathUploadImage, loader); }; }. that I used to put inside app.component.ts, now where do I put it?

babbler-eu avatar Aug 29 '21 18:08 babbler-eu

after days of testing I managed to solve the problem, now everything works, but I will not tell anyone how I did it.

babbler-eu avatar Sep 08 '21 08:09 babbler-eu