CODEWITHSUNDEEP
angular6ckeditor5
user8787983
user8787983

Reputation: 95

CKEditor 5 throws Cannot read property 'create' of undefined in Angular6 project

I've created a project using JHipster and trying to create a WYSIWYG rich text editor using CKEditor 5. I've done the below steps by using the following link to create an editor.

  1. npm install --save-dev @ckeditor/ckeditor5-angular

  2. npm install --save-dev @ckeditor/ckeditor5-build-classic

  3. Imported @ckeditor/ckeditor5-angular and added in imports in my module.js

  4. Imported @ckeditor/ckeditor5-build-classic and created a variable public Editor: ClassicEditor; in my component

  5. Used following code in html

Blockquote

<ckeditor [editor]="Editor" data="<p>Hello world!</p>"></ckeditor>

When I go to the page I added throws the following error which I got it from the browser developer tools console.

ERROR TypeError: Cannot read property 'create' of undefined
    at CKEditorComponent.createEditor (ckeditor-ckeditor5-angular.js?076d:187)
    at eval (ckeditor-ckeditor5-angular.js?076d:96)
    at ZoneDelegate.invoke (zone.js?d135:388)
    at Zone.run (zone.js?d135:138)
    at NgZone.runOutsideAngular (core.js?09c9:3784)
    at CKEditorComponent.ngAfterViewInit (ckeditor-ckeditor5-angular.js?076d:95)
    at callProviderLifecycles (core.js?09c9:9568)
    at callElementProvidersLifecycles (core.js?09c9:9542)
    at callLifecycleHooksChildrenFirst (core.js?09c9:9532)
    at checkAndUpdateView (core.js?09c9:10468)

I'm just wondering if that's an issue with CKEditor 5 or did I miss any steps?

Upvotes: 8

Views: 17707

Answers (5)

Prince kheriwal
Prince kheriwal

Reputation: 1

try declaring this

public Editor: any = ClassicEditorBuild;

and in

file ../../../../node_modules/@ckeditor/ckeditor5-angular/ckeditor.component.d.ts

change CKEDITOR_VERSION: to any from string.

Upvotes: 0

trees_are_great
trees_are_great

Reputation: 3911

My solution was roughly the same as above, but as these didn't quite solve it, I tried:

public Editor: any = ClassicEditorBuild;

(adding : any)

which worked

Upvotes: 3

Siddharth Jain
Siddharth Jain

Reputation: 880

Created a file src/app/typings.d.ts with below code

declare module '@ckeditor/ckeditor5-build-classic' { // or other CKEditor 5 build.
const ClassicEditorBuild: any;

export = ClassicEditorBuild;}

Inside your main app module, import CKEditorModule as below:

import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
@NgModule({imports: [CKEditorModule]})

Now, add import to the component where that issue was occurring in say x.component.ts

import * as ClassicEditorBuild from '@ckeditor/ckeditor5-build-classic';

export class x implements OnInit { public Editor = ClassicEditorBuild;constructor() { }  ngOnInit(): void {}}

Finally, add below code in your x.component.html

<ckeditor [editor]="Editor" data="<p>Hello, world!</p>"></ckeditor>

Upvotes: 6

Elyas
Elyas

Reputation: 121

If you have this issue even if you have this:

public Editor = BalloonEditor;

Check if you have in your template any call to the ckeditor component

For example:

<ckeditor formControlName="contenido"></ckeditor>

If you not set [editor]="Editor" it will produce same error.

Upvotes: 0

Maciej Bukowski
Maciej Bukowski

Reputation: 3348

You have the following code under the link:

export class ArticleUpdateComponent implements OnInit {
    public Editor: ClassicEditor;
    // ...
}

While you should actually set the ClassicEditor to the Editor property, you only set it's type (which is actually wrong too, since the editor can have type typeof ClassicEditor).

What you should do is simple property assignment public Editor = ClassicEditor;, which will make the ClassicEditor available in the template under the Editor property.

This error can be also thrown when the import is incorrect - depending on the TypeScript configuration the import should look like import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic'; or import ClassicEditor from '@ckeditor/ckeditor5-build-classic';.

Upvotes: 18

Related Questions