Ckeditor5-angular: Error: this.editor.create is not a function

[zbvyas]

@Reinmar @ma2ciek

I am following the steps from the documentation, here. And I continuously get the following error:

 ERROR TypeError: this.editor.create is not a function
    at CKEditorComponent.createEditor (ckeditor.component.ts:359)
    at ckeditor-ckeditor5-angular.js:202
    at ZoneDelegate.invoke (zone.js:442)
    at Zone.run (zone.js:169)
    at NgZone.runOutsideAngular (core.js:21150)
    at CKEditorComponent.ngAfterViewInit (ckeditor-ckeditor5-angular.js:197)

app.module.ts

import { CKEditorModule } from '@ckeditor/ckeditor5-angular';

@NgModule({
...
imports: [CKEditorModule]
})

app.component.ts

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

@Component({ ... })
export class AppComponent {
public Editor = ClassicEditor;
}

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

This is an Angular v7 application using Webpack, and the following ckeditor packages:

• @ckeditor/ckeditor5-angular @^1.0.0
• @ckeditor/ckeditor5-build-classic @^12.4.0

[ma2ciek]

Hi @zbvyas,

Could you share your tsconfig.json? Maybe your resolution system differs as the import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic'; doesn't import the editor. You could also log this object to find out what is it exactly.

[zbvyas]

Thanks for the fast reply @ma2ciek , the tsconfig.json is as follows:

{
  "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true
    "experimentalDecorators" true,
    "lib": ["es6", "dom"],
    "module": "es6",
    "moduleResolution": "node",
    "sourceMap": true,
    "target": "es5",
  },
  "exclude": [
     "spec",
     "node_modules",
     "vendor",
     "public"
  ],
  "compileOnSave": false
}

and console.log(this.Editor) definitely doesn't seem right...

Module{_esModule: true, Symbol(Symbol.toStringTag): "Module")

[ma2ciek]

Hmm. it looks correct, but something changes the module resolution system. I guess it's a duplicate of https://github.com/ckeditor/ckeditor5-angular/issues/122 and you should use import ClassicEditor from '@ckeditor/ckeditor5-build-classic'; Could you try it?

[zbvyas]

import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

The above results in: Error: [ts] Module ''@ckeditor/ckeditor5-build-classic'' has no default export

import { ClassicEditor } from '@ckeditor/ckeditor5-build-classic';

The above results in: Error: [ts] Module ''ckeditor/ckeditor5-build-classic'' has no exported member 'ClassicEditor'

[ma2ciek]

Does it happen in both, production and non-production build?

I've found this webpack issue - https://stackoverflow.com/questions/54818030/unable-to-import-webpack-bundled-umd-library-as-an-es6-import with a workaround. However I'm still don't know why it happens to you.

[ma2ciek]

Also, do you have defined typings for the @ckeditor/ckeditor5-build-classic package?

[zbvyas]

This is from my dev (local) environment, I have not tried running this code in production since it's not working locally...

Not sure I totally understand/follow the workaround you posted? I don't think I'd want to access the editor via window ?

I have a typings.d.ts file which looks like this:

declare module '@ckeditor/ckeditor5-build-classic' {}

[ma2ciek]

Could you try to change it to:

declare module '@ckeditor/ckeditor5-build-classic' {
    const ClassicEditorBuild: any;

    export default ClassicEditorBuild;
}

It will allow TS to import the default export instead.

And change to import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

[zbvyas]

That seemed to have done something, it changed the error from " Error: [ts] Module ''@ckeditor/ckeditor5-build-classic'' has no default export"

to this...

export 'default' (imported as 'ClassicEditor') was not found in '@ckeditor/ckeditor5-build-classic'

[ma2ciek]

Do you have an option to somehow share a part of the application with this editor? I can't reproduce this error and I'm out of ideas what could have gone wrong...

[ma2ciek]

Not sure I totally understand/follow the workaround you posted? I don't think I'd want to access the editor via window ?

This seems to be a last resort solution only.

[zbvyas]

Do you have an option to somehow share a part of the application with this editor? I can't reproduce this error and I'm out of ideas what could have gone wrong...

What do you mean share a part of the application with this editor? Share my source code with you all...or? No great way to do that unfortunately

[ma2ciek]

What do you mean share a part of the application with this editor? Share my source code with you all...or? No great way to do that unfortunately

Without steps to reproduce the issue, I'm rather unable to help. I've been trying to reproduce this issue in https://github.com/ma2ciek/ckeditor5-angular-test/tree/i/146 but with no luck.

[zbvyas]

What do you mean share a part of the application with this editor? Share my source code with you all...or? No great way to do that unfortunately

Without steps to reproduce the issue, I'm rather unable to help. I've been trying to reproduce this issue in https://github.com/ma2ciek/ckeditor5-angular-test/tree/i/146 but with no luck.

Understood - but your example is using Angular CLI and v6, I am not using CLI - I am using webpack as my bundler. This is a Rails/Angular app which uses Webpack.

e.g.
rails new <app-name> --webpack=angular

I'll try reproducing in a new project and link to my GitHub repo.

[ma2ciek]

Since the application is bundled by the custom webpack, then I guess that this error might be caused by the babel or another code transpiler. I'd check also target: 'es6' in tsconfig.json.

[petarblazevski]

@ma2ciek here is an example on stackblitz. Just open the console and you will see the issue. The example uses the latest Angular CLI 8.x

[ma2ciek]

Hi @petarblazevski,

This is a different issue, Stackblitz uses a different module resolution strategy - your issue is a duplicate of https://github.com/ckeditor/ckeditor5-angular/issues/122#issuecomment-508665643.

[petarblazevski]

@ma2ciek ahh I see. My bad. With a fresh angular install locally, using Angular CLI, I was getting the following error ERROR TypeError: Cannot read property 'create' of undefined. I solved it by changing the import to this
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

Maybe the docs should be updated

[ma2ciek]

Maybe the docs should be updated

Hm, I could mention that in case of such error the above import should be checked as well. But it's hard to maintain in docs the whole available configuration matrix. On the other hand, the stackblitz example in docs could be valuable.

Edit: I moved a follow-up to https://github.com/ckeditor/ckeditor5-angular/issues/151.

[ma2ciek]

I'm closing this issue due to the lack of activity.

[zbvyas]

sorry for the inactivity, but I had better luck with ngx-quill, it’s way easier to use and 0 issues with setup. Recommended for others as well.
https://github.com/KillerCodeMonkey/ngx-quill

[mosesweb]

I am having the same issue and I believe I am not alone.
Same issue as described here: https://stackoverflow.com/questions/59498902/ckeditor5-angular8-typeerror-this-editor-create-is-not-a-function. Not sure what to do as I keep getting

core.js:4081 ERROR Error: Uncaught (in promise): TypeError: this.editor.create is not a function
TypeError: this.editor.create is not a function
at CKEditorComponent._callee2$ (ckeditor.component.ts:275)
at tryCatch (runtime.js:45)
at Generator.invoke [as _invoke] (runtime.js:274)
at Generator.prototype. [as next] (runtime.js:97)
at tslib.es6.js:74
at new ZoneAwarePromise (zone.js:913)
at __awaiter (tslib.es6.js:70)
at ckeditor.component.ts:272
at ZoneDelegate.invoke (zone.js:386)
at Zone.run (zone.js:143)
at resolvePromise (zone.js:832)
at resolvePromise (zone.js:784)
at zone.js:894
at ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:27126)
at ZoneDelegate.invokeTask (zone.js:420)
at Zone.runTask (zone.js:188)
at drainMicroTaskQueue (zone.js:601)

[songoo]

Have same issue, on vue3 after generating from online generator after adding "Table cell properties" and "Table properties", since I wanted to change table collumn width.

[raoshahid799]

getting same error " this.editor.create is not a function
creator" i am using custom build generated from online

[songoo]

(After excluding "Table cell properties" and "Table properties" in generator, it worked)

[raoshahid799]

i removed the Pagination plugin from custom build its started working, Title plugin disable the editor's toolbar so i excluded too.

[ma2ciek]

I guess that you added the Watchdog feature which should not be included in the build used by integrations.

After adding the mentioned plugins (Table cell properties, Table properties, Pagination) the editor works fine (however the Pagination plugin requires the license key and the configuration to be passed).

[raoshahid799]

Hello i created tutorial video for custom build from online builder and Github and integrated in Angular 10
might be it will someone
here is video URL
https://youtu.be/HsjCkvEvQhA

[aosorio9559]

I used the online builder and I keep getting this error message:

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'rootName' of undefined TypeError: Cannot read property 'rootName' of undefined at ckeditor.js:5319 at ckeditor.js:649 at n (ckeditor.js:656) at An._setUpBindToBinding (ckeditor.js:674) at Object.using (ckeditor.js:649) at new fa (ckeditor.js:5319) at Jb.Hc (ckeditor.js:7504) at Jb.dd [as constructor] (ckeditor.js:8520) at new Jb (ckeditor.js:13735) at ckeditor.js:8534 at resolvePromise (zone.js:832) at resolvePromise (zone.js:784) at zone.js:894 at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421) at Object.onInvokeTask (core.js:28161) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420) at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188) at drainMicroTaskQueue (zone.js:601)

I imported the build/ckeditor.js into my Angular component as follows:

````js
import * as Editor from "../../../../ckeditor5/build/ckeditor";

//...

export class CreateComponent implements OnInit {
editor = Editor;
ckeditorContent = "

Hello, world

";
}
````

This is the template
html <ckeditor [editor]="editor" [(ngModel)]="ckeditorContent"> </ckeditor>

This is my tsconfig.json file

json { "compileOnSave": false, "compilerOptions": { "allowJs": true, "importHelpers": true, "outDir": "./dist/out-tsc", "sourceMap": true, "declaration": false, "moduleResolution": "node", "emitDecoratorMetadata": true, "experimentalDecorators": true, "module": "esnext", "target": "es6", "typeRoots": [ "node_modules/@types" ], "lib": [ "esnext", "dom" ] } }

[raoshahid799]

@aosorio9559
same issue mentioned in this thread follow this link
https://github.com/ckeditor/ckeditor5-angular/issues/20

[raoshahid799]

this is my ts config of Angular 9
@aosorio9559

`{
"compileOnSave": false,
"compilerOptions": {
"downlevelIteration": true,
"importHelpers": true,
"outDir": "./dist/out-tsc",
"baseUrl": "src",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true
},
"allowJs": true,
"target": "es2015",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2016",
"dom"
],
"module": "esnext"
},
"angularCompilerOptions": {
"enableIvy": false
}

}
`

[id1945]

https://stackblitz.com/edit/ngx-summernote

I spent a few days searching for a solution but it couldn't, and finally I switched to using ngx-summernote
It was great.

It allows uploading base64 images and resizing images