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 ?
- Laravel 7.x and 6.x Ajax Multiple Image Upload with Preview Example
- Laravel select with count(*) using db raw example
- PHP Laravel select with join subquery example
- PHP Laravel Ajax Form Submit Example
- How to create events for created/updated/deleted model task in Laravel 5?
- Angular JS Form Validation Example Code
- AngularJS - Confirm Password Validation Example
- Laravel Ajax Request using X-editable bootstrap Plugin Example