In this Angular and CKEditor5 article, we’ll see how to integrate CKEditor in Angular application. CKEditor consists of different ready to use editor build. Every “build” provides a single type of editor with a set of features and a default configuration.
In this example we’re going to integrate CkEditor 5 in Angular Application.
Table of Contents
INSTALL CKEDITOR 5
Now we’ll install ckeditor 5 in our existing application by the following command:
npm install --save @ckeditor/ckeditor5-angular
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 now we’ll install official editor build
npm install --save @ckeditor/ckeditor5-build-classic
Note: CkEditor 5 is supported in Angular 5+
Import CKEditorModule
Now import CkEditorModule in module file whose component will be using ckeditor
component in the template file. i.e app.module.ts
or feature.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
CKEditorModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Import ClassicEditor build in Angular Component
In the component where you want to show the rich text editor, import editor build in the component file as following and also make sure to assign public
property to Editor
variable, to which you’ll assign ClassicEditor
so that it can be accessible from template file.
import { Component } from '@angular/core';
import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
public Editor = ClassicEditor;
}
Use CkEditor In Template
You can use ckeditor
component in template file as following:
<h1>Angular CKEditor5 Demo</h1>
<ckeditor [editor]="Editor" data="<p>Angular CkEditor 5 Integration!</p><br/><br/>This is demo application of angular and ckeditor5 integration</br>"></ckeditor>
Output

That’s it! ckeditor5 is installed successfully in angular application.
I hope you like this Angular and CKEditor5 article. 🙂
Also Read :