CKEditor In Angular

In this article, we will figure it out how to utilize CKEditor in the angular Application.

So, we should see an extremely straightforward advance and get it exceptionally basic model here.

Step 1:

Create an Angular Application Using Following Command

ng new ck-editor
cd ck-editor

Step 2:

Add the following package to your application.

npm install ckeditor4-angular

Step 3:

Add below code in your app.module.ts file.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CKEditorModule } from 'ckeditor4-angular';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    CKEditorModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Step 4:

Add below code in your app.component.ts file.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'ck-editor';
  name = 'Angular';
  
  public model = {
      name: 'Krishna',
      description: '<p>This is a sample form using CKEditor 4.</p>'
    };
  
  onSubmit() {
      console.log( `Form submit, model: ${ JSON.stringify( this.model ) }` );
  }
}

Step 5:

Add below code in your app.component.html file

<form (ngSubmit)="onSubmit()">
  <h1>Angular CKEditor Example - ItSolutionStuff.com</h1>

  <div>
    <label for="name">Name</label>
    <input [(ngModel)]="model.name" type="text" name="name" id="name">
  </div>

  <label for="description">Description</label>
  <ckeditor
    #editor
    [(ngModel)]="model.description"
    id="description"
    name="description">
  </ckeditor>

  <button type="submit">Submit</button>
</form>

Step 6:

Run Angular Application

ng serve

Output:-