How to Add Rich Text Editor to an Angular App
Tags: angular, typescript, ckeditor, richtexteditor
Published: 2020-09-24 07:16:28

![Image](https://dev-to-uploads.s3.amazonaws.com/i/ycnwngzj6es0cwa0ti4l.jpg)

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 <ckeditor> 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 <ckeditor> 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>'
    };
    // ...
}
```
2. 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 <ckeditor> 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](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/angular.html).