Custom CKEditor in Angular 13 - Error Message: \"Property \'create\' is missing in type \'{ ClassicEditor: {}; }\' but required in type \'EditorConstructor\'

Question

I am trying to use a CKEditor5 Custom Build into my angular project, however, I'm getting a weird error that I cannot solve. I created an empty project and added ckeditor-custom-build directory in the root: next to src & node_modules.

I have followed the tutorials: https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/frameworks/angular.html#using-a-custom-ckeditor-5-build

Environment:

• @angular/common: 13.1.0
• @ckeditor/ckeditor5-angular: 4.0.0
• @ckeditor/ckeditor5-build-classic: 34.2.0

app.module.ts

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { CKEditorModule } from '@ckeditor/ckeditor5-angular';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    CKEditorModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.js

import { Component } from '@angular/core';
import * as Editor from 'ckeditor5/build/ckeditor';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'ckeditor-test';
  public editor = Editor;

  config: any = {
    toolbar: ['heading', 'bold', 'italic'],
    language: 'en'
  };
  html: string = '<h1>Hello World</h1>';
  constructor() {}
}

app.component.html

      <ckeditor [editor]="editor" 
                [(ngModel)]="html"
      ></ckeditor>

Error Message in Console

Error: src/app/app.component.html:332:18 - error TS2741: Property 'create' is missing in type '{ ClassicEditor: {}; }' but required in type 'EditorConstructor'.

332       <ckeditor [editor]="editor"
                     ~~~~~~

  src/app/app.component.ts:6:16
    6   templateUrl: './app.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AppComponent.

Answer 1

I have worked withckeditor5in the past with no problems.

I can see you are using the following import

import * as Editor from 'ckeditor5/build/ckeditor';

In my case it was this import

import * as Editor from '@ckeditor/ckeditor5-build-decoupled-document';

I'll share my config which is supposed to remain the same.

Now first thing is that sinceckeditor5doesn't contain typings, andAngularwould complain about it, I had to create the following file:editor-typings.d.ts

declare module '@ckeditor/ckeditor5-build-decoupled-document' {
  const Editor: any;
  export = Editor;
}

Now in your app.component.ts add the following method

init(editor: any): void {
  editor.ui
    .getEditableElement()
    .parentElement.insertBefore(
      editor.ui.view.toolbar.element,
      editor.ui.getEditableElement()
    );
}

In your app.component.html, you need to bind this method with yourckeditor5ready's output event like this

<ckeditor [editor]="editor" (ready)="init($event)"></ckeditor>

Let me know if the problem would still be there.

Answer 2

in component.ts file while initializing the custom editor include type as any

  public editor: any = Editor;