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.

Can you try this import of Editor instead ? import * as Editor from '@ckeditor/ckeditor5-build-classic'; — Telman
– Telman, Commented Jul 16, 2022 at 4:04
It does work with that import, I'm trying to import a custom build in my project. — Suguru Tokuda
– Suguru Tokuda, Commented Jul 17, 2022 at 20:32

gowtham selvaraj · Accepted Answer · 2022-12-26 11:23:21Z

2

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

  public editor: any = Editor;

answered Dec 26, 2022 at 11:23

gowtham selvaraj

1391 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mohamed Karkotly · Accepted Answer · 2022-07-16 04:08:51Z

1

I have worked with ckeditor5 in 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 since ckeditor5 doesn't contain typings, and Angular would 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 your ckeditor5 ready's output event like this

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

Let me know if the problem would still be there.

answered Jul 16, 2022 at 4:08

Mohamed Karkotly

1,5253 gold badges15 silver badges28 bronze badges

2 Comments

Suguru Tokuda Over a year ago

I'm using a CKEditor5 custom build. I configured the build on ckeditor.com/ckeditor-5/online-builder. Downloaded the build and move the files to the ckeditor5 folder that sits on the root directory and downloaded npm dependencies there. Then, I imported the editor instance from 'ckeditor5/build/ckeditor'

Dhaval Mojidra Over a year ago

Not Working with Angular 14

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related