Adding CKEditor in Angular Application

In this post we will have a look on how to add a CKEditor in Angular Application. CkEditor is a ready-to-use rich text editor which has a number of builds available i.e. Classic, Inline, Balloon and Document. We will have a look at the Classic editor and how to integrate it in Angular application.

Installation

We first have to install CKEditor 5 as shown below :

npm install --save @ckeditor/ckeditor5-angular

and then install the classic build

npm install --save @ckeditor/ckeditor5-build-classic

Include in App Module

At first import CKEditorModule from '@ckeditor/ckeditor5-angular'

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

and then add it to the imports array

@NgModule({
  imports: [
    ...,     
    CKEditorModule,  
    ...
  ]

Use it in Component

At first import the ClassicEditor from '@ckeditor/ckeditor5-build-classic'

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

and then assign it to a public property to make it accessible throughout the component

public Editor = ClassicEditor;

add a config which has a placeholder property

public config = {
  placeholder: 'Type the content here!'
};

Next add it to the template

<ckeditor id="question-body"
          [(ngModel)]="question.body"
          [editor]="Editor"
          [config]="config"
          name="Body"
          data="<p></p>"
          class="body">
</ckeditor>

Once done, it will look like below