How To Use CKEditor In Angular

  • CKEditor is used to edit HTML documents or their fragments in the browser.this plugin allows you to add class to element.for use CKEditor in angular you have to install following npm in your project.

npm i ng2-ckeditor –save

  •  Now add following in app.module.ts file
import {NgModule} from '@angular/core'; 
import {BrowserModule} from '@angular/platform-browser'; 
import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; 
import { CKEditorModule } from 'ng2-ckeditor';

 @NgModule({ declarations: [AppComponent],
 imports: [ BrowserAnimationsModule, BrowserModule, CKEditorModule], 
 providers: [], bootstrap: [AppComponent] })
  •  In app.component.ts file add following line
import { Component } from '@angular/core';

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']

export class AppComponent {
  ckeditorContent: string = '<p>Hello World !</p>';
  • In app.component.html file add following line
<ckeditor [(ngModel)]="ckeditorContent"></ckeditor>
  • Now our code is ready to run

npm start


Submit a Comment

Your email address will not be published. Required fields are marked *


Select Categories