How to Install and Use CKEditor in Angular?

By Hardik Savani | June 14, 2020 | Category : Angular


Hi Dev,

This article will provide some of the most important example how to use ckeditor in angular. Here you will learn how to install ckeditor in angular. In this article, we will implement a angular 9 ckeditor example. this example will help you angular ckeditor 4 example.

Sometime we need to use rich textbox in our application. so when you need to use rich textrea then i will always suggest ckeditor to use. ckeditor provide almost html element that you can user it like list, heading, form element, link, italic, old etc. so if you also want to install ckeditor in your anguar app then i will help you in this article.

Here, we will look step by step example how to use ckeditor in angular 6, angular 7, angular 8, angular 9 and angular 10 application.

So, let's see very simple step and get it very simple example here:

Step 1: Create New App

You can easily create your angular application using bellow command:

ng new myApp

Step 2: Install Npm Packages

In this step, we will install ckeditor4-angular npm package for use ckeditr rich textarea in angular 8/9. so let's run bellow command:

npm install ckeditor4-angular

Step 3: Import CKEditorModule

Now, here we will import CKEditorModule from ckeditor4-angular and then we add on declarations part. so let's update app.module.ts file as like bellow:

src/app/app.module.ts

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

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

import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

import { CKEditorModule } from 'ckeditor4-angular';

@NgModule({

imports: [ BrowserModule, FormsModule, CKEditorModule ],

declarations: [ AppComponent ],

bootstrap: [ AppComponent ]

})

export class AppModule { }

Step 4: Update Ts File

Here, we will update app.component.ts file here, in this file we will set model default values and add onSubmit() function for getting textarea value.

You can update as bellow app.component.ts file.

src/app/app.component.ts

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

import {NgForm} from '@angular/forms';

@Component({

selector: 'my-app',

templateUrl: './app.component.html',

styleUrls: [ './app.component.css' ]

})

export class AppComponent {

name = 'Angular';

public model = {

name: 'Hardik',

description: '<p>This is a sample form using CKEditor 4.</p>'

};

onSubmit() {

console.log( `Form submit, model: ${ JSON.stringify( this.model ) }` );

}

}

Step 5: Update Layout File

Here, we will update html file as like bellow, so update it as like bellow:

src/app/app.component.html

<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"

type="divarea">

</ckeditor>

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

</form>

Now you can run angular app:

Run Angular App:

ng serve

when you click on submit button then you will get output as like bellow:

Output:

Form submit, model: {"name":"Hardik","description":"<p>This is a sample form using CKEditor 4.  sss</p>\n"}

I hope it can help you...




Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.

We are Recommending you: