a blog for those who code

Monday 10 June 2019

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.


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

  imports: [

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"

Once done, it will look like below

No comments:

Post a Comment