Pages

How to Implement ckeditor in Angular

Have you ever come across situation, where you need to implement an editor in your Angular project !. In this post We are going to implement ng2-ckeditor in our Angular Project, so lets get started.


ng2-ckeditor

first, lets create a project in angular. i had already created a project so, i'm going to use that. if you are interested or new to Angular Project creation you can check the post 
here on how to create project in Angular. 



Now to use ng2-ckeditor in our angular project we have to first install the module into our project. to do so copy and paste the below given line f code to your command prompt and execute the command.

npm install ng2-ckeditor--save

this will install the ng2-ckeditor module to our angular project. now since the installation of module is done, lets get to implementation of ng2-ckeditor in our angular project.

Note: It is also mandatory to include the CKEditor java script file in your index,html file.

<script src="https://cdn.ckeditor.com/4.5.11/full/ckeditor.js"></script>
Next step is to import CKEditor module into our project's main module in angular ie, app.module. your code should look as below after importing CKEditorModule .

import { CKEditorModule } from 'ng2-ckeditor'
@NgModule({
   ...
   imports: [CKEditorModule],
  ...
})
export class AppModule {}

Now I want to create a new component to view Html editor so, i will create a component with name ckeditor by executing the following command on your project command prompt as shown below. 

ng generate component ckeditor

this will create a folder with name as "CKEditorComponent" in your projects src/app folder.

Now open app.module.ts in your editor and import 'CKEditorComponent' as shown below.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { CKEditorModule } from 'ng2-ckeditor'
import { CkeditorComponent } from './ckeditor/ckeditor.component';
@NgModule({
declarations: [
AppComponent,
CkeditorComponent 
],
imports: [
BrowserModule,
CKEditorModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }


Now open ckeditor.component.html and copy and paste the below given code.

 <h3>Angular CKEditor</h3>
 <ckeditor
    [(ngModel)]="ckeditorContent"
debounce="500">
  </ckeditor>

Next open ckeditor.component.ts and copy and paste the below given ts code.

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

@Component({
  selector: 'app-ckeditorcomp',
  templateUrl: './ckeditorcomp.component.html',
  styleUrls: ['./ckeditorcomp.component.css']
})

export class CkeditorcompComponent implements OnInit {
ckeditorContent: any;

  constructor() {
this.ckeditorContent = '<p>Some html</p>';
  }

  ngOnInit() {
  }

}

Please save the above files and refresh your project to check if your code is running fine. if you have implemented the code as explained/ given you should be greeted with an HTML editor in your ckeditor component.

Tips :

  •  In case any error appears, please do check imported modules(root components) and also js import in index  file.
  •   If Case if you are getting the following error " Can't bind to 'ngModel' since it isn't a known property of ckeditor ", Please import common module along with form module.



vinay kumar

Founder of Gowriter.Blogspot.com, Tech Enthusiast, Normal type of Person with passion toward's work.

No comments: