How to Add Rich Text Editor to an Angular App

CKEditor 5 consists of ready-to-use editor builds and CKEditor 5 Framework upon which the builds are based.

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.

While there is no support to integrate CKEditor 5 from source yet, you can still create a custom build of CKEditor 5 and include it in your Angular application.

Quick start

In your existing Angular project, install the CKEditor npm package

npm install --save @ckeditor/ckeditor5-angular

Assuming that you picked @ckeditor/ckeditor5-build-classic:

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

Now, add CKEditorModule to modules whose components will be using the component in their templates.

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

@NgModule( {
    imports: [
        CKEditorModule,
        // ...
    ],
    // ...
} )

Import the editor build in your Angular component and assign it to a public property to make it accessible from the template:

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

@Component( {
    // ...
} )
export class MyComponent {
    public Editor = ClassicEditor;
    // ...
}

Finally, use the tag in the HTML template to run the rich text editor:

<ckeditor [editor]="Editor" data="<p>Hello, world!</p>"></ckeditor>

Integration with ngModel

1. Create some model in your component to share with the editor:

@Component( {
    // ...
} )
export class MyComponent {
    public model = {
        editorData: '<p>Hello, world!</p>'
    };
    // ...
}

1. Use the model in the template to enable a two–way data binding:

<ckeditor [(ngModel)]="model.editorData" [editor]="Editor"></ckeditor>

Supported @Input properties

Editor ( required ):

The Editor which provides the static create() method to create an instance of the editor:

<ckeditor [editor]="Editor"></ckeditor>

Config:

<ckeditor [config]="{ toolbar: [ 'heading', '|', 'bold', 'italic' ] }" ></ckeditor>

Data:

<ckeditor data="<p>Hello, world!</p>" ></ckeditor>

or

@Component( {
    // ...
} )
export class MyComponent {
    public editorData = '<p>Hello, world!</p>';
    // ...
}

<ckeditor [data]="editorData" ></ckeditor>

Supported @Output properties

Change:

It is fired with an object containing the editor and the CKEditor 5 change:data event object.

<ckeditor [editor]="Editor" (change)="onChange($event)"></ckeditor>

import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import { ChangeEvent } from '@ckeditor/ckeditor5-angular/ckeditor.component';

@Component( {
    // ...
} )
export class MyComponent {
    public Editor = ClassicEditor;

    public onChange( { editor }: ChangeEvent ) {
        const data = editor.getData();

        console.log( data );
    }
    ...
}

Setting the placeholder

<ckeditor [config]="{placeholder: 'Type the content here!' }" ></ckeditor>

Accessing the editor instance

To do this, create a template reference variable #editor pointing to the component:

<ckeditor #editor [editor]="Editor"></ckeditor>

Then get the <ckeditor> component using a property decorated by @ViewChild( 'editor' ) and access the editor instance when needed:

@Component()
export class MyComponent {
    @ViewChild( 'editor' ) editorComponent: CKEditorComponent;

    public getEditor() {
        // Warning: This may return "undefined" if the editor is hidden behind the `*ngIf` directive or
        // if the editor is not fully initialised yet.
        return this.editorComponent.editorInstance;
    }
}

Thanks for reading my blog on how to add Rich Text Editor in angular, for more official in detail documentation please read CKEditor Angular.