Are you looking for example of angular ckeditor 4 example. i explained simply step by step install ckeditor in angular. This article will give you simple example of how to install ckeditor in angular 8. you will learn ckeditor in angular 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 and angular 9 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 - HDTuto.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...
Do you like below Tutorials ?
- Multidimensional Array Search By Value in PHP
- Laravel Install Font Awesome Icons Example
- How to Use Moment JS in Laravel?
- Angular 9 Get Environment Variables Example
- Angular Delete a Component From Cli Example
- How to Upload File from Local to Server using SSH?
- Angular Use CKEditor Example Tutorial
- How to Use Multiple Select Dropdown in Laravel?