Integrate CKEditor(rich text editor) in Angular

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

Integrate CKEditor(rich text editor) in Angular

That’s it! ckeditor5 is installed successfully in angular application.

I hope you like this Angular and CKEditor5 article. 🙂