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';

@Component({
  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.

Subscribe

Select Categories