#5 ✏️Add Editor
Add Forms module
We will add the FormsModule in 📝src/app/app.module.ts as shown below.
import { FormsModule } from '@angular/forms';
@NgModule({
...
imports: [
...
FormsModule,
],
})Creating the data model
Create new a folder src/app/models. Create a new file 📝src/app/models/post.ts and paste the following code
export class Post {
postId: string;
title: string;
content: string;
createdDate: any;
constructor() {
this.content = '';
}
}Create the blog service
We will create a service to handle our database operations. Create a new service by making a right-click on the folder 📁servicesand navigating to 'Angular Generator','Component' and provide the name ‘blog’.
Open the 📝src/app/services/blog.service.ts file and add the following import definitions.
import { AngularFirestore } from '@angular/fire/firestore';
import { Post } from '../models/post';
import { map } from 'rxjs/operators';
import { Observable } from 'rxjs';Inject the AngularFirestore in the constructor.
constructor(private db: AngularFirestore) { }Now we will add the method to create a new post. The method to add a new blog post is shown at https://github.com/AnkitSharma-007/blogsite/blob/master/src/app/services/blog.service.ts#L14-L17. Put this method in blog.service.ts file.
createPost(post: Post) {
const postData = JSON.parse(JSON.stringify(post));
return this.db.collection('blogs').add(postData);
}Install CkEditor package
We will use CKEditor for adding and editing our blog post. CKEditor is a Smart WYSIWYG(What you see is what you get) editor which provides us with great editing capabilities.
⏰We already installed into stackblitz @ckeditor/ckeditor5-angular @ckeditor/ckeditor5-build-classic
Imports the CKEditorModule in 📝src/app/app.module.ts as shown below.
import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
@NgModule( {
imports: [
...
CKEditorModule,
],
})Add the blog editor
We will create a new component for adding and editing the blog. Let’s make a right-click on the folder 📁components. Navigate to 'Angular Generator', select 'Component' and provide the name ‘blog-editor’.
Add a route to the addpost page
Add the route for this component in 📝app.module.ts as shown below:
RouterModule.forRoot([
...
{ path: 'addpost', component: BlogEditorComponent },
...
])Add CKEditor to BlogEditorComponent
BlogEditorComponentOpen 📝src/app/components/blog-editor/blog-editor.component.ts and add the import definitions:
import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import { Post } from 'src/app/models/post';
import { DatePipe } from '@angular/common';
import { BlogService } from 'src/app/services/blog.service';
import { Router, ActivatedRoute } from '@angular/router';We will also initialize some properties as shown at https://github.com/AnkitSharma-007/blogsite/blob/master/src/app/components/blog-editor/blog-editor.component.ts#L16-L20
public Editor = ClassicEditor;
ckeConfig: any;
postData = new Post();
formTitle = 'Add';
postId = '';We will create a method to define the configuration for the blog editor. You can get the method definition from https://github.com/AnkitSharma-007/blogsite/blob/master/src/app/components/blog-editor/blog-editor.component.ts#L50-L66
setEditorConfig() {
this.ckeConfig = {
removePlugins: ['ImageUpload', 'MediaEmbed'],
heading: {
options: [
{ model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
{ model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
{ model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
{ model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' },
{ model: 'heading4', view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4' },
{ model: 'heading5', view: 'h5', title: 'Heading 5', class: 'ck-heading_heading5' },
{ model: 'heading6', view: 'h6', title: 'Heading 6', class: 'ck-heading_heading6' },
{ model: 'Formatted', view: 'pre', title: 'Formatted' },
]
}
};
}We will invoke this method inside ngOnInit as shown below.
ngOnInit() {
this.setEditorConfig();
}Update the BlogEditorComponent template
Open src/app/components/blog-editor/blog-editor.component.html and put the code as shown at https://github.com/AnkitSharma-007/blogsite/blob/master/src/app/components/blog-editor/blog-editor.component.html
<h1>{{formTitle}} Post</h1>
<hr />
<form #myForm="ngForm" (ngSubmit)="myForm.form.valid && saveBlogPost()" accept-charset="UTF-8" novalidate>
<input type="text" class="blogHeader" placeholder="Add title..." class="form-control" name="postTitle"
[(ngModel)]="postData.title" #postTitle="ngModel" required />
<span class="text-danger" *ngIf="myForm.submitted && postTitle.errors?.required">
Title is required
</span>
<br />
<div class="form-group">
<ckeditor name="myckeditor" [config]="ckeConfig" [(ngModel)]="postData.content" #myckeditor="ngModel"
debounce="300" [editor]="Editor"></ckeditor>
</div>
<div class="form-group">
<button type="submit" mat-raised-button color="primary">Save</button>
<button type=" button" mat-raised-button color="warn" (click)="cancel()">CANCEL</button>
</div>
</form>Add a new blog
We will now implement the feature of adding a new blog to our application. Open 📝src/app/components/blog-editor.component.ts and inject the following service definitions in the constructor.
constructor(private _route: ActivatedRoute,
private datePipe: DatePipe,
private blogService: BlogService,
private _router: Router) { }Add the following code in @Component decorator DatePipe can be injected.
@Component({
...
providers: [DatePipe]
}We will create a new method called saveBlogPost which is used to add a new post to our database. The definition for this method is shown below.
saveBlogPost() {
this.postData.createdDate = this.datePipe.transform(Date.now(), 'MM-dd-yyyy HH:mm');
this.blogService.createPost(this.postData).then(
() => {
this._router.navigate(['/']);
}
);
}This method will be invoked on click of Save button. We will add the following code definition for Cancel button.
cancel() {
this._router.navigate(['/']);
}Add buttons in Nav bar
We will add the navigation button to blog editor and home page in the nav bar. Add the following code inside the <mat-toolbar> in the file 📝src/app/components/nav-bar/nav-bar.component.html:
<mat-toolbar class="nav-bar mat-elevation-z2">
<button mat-button [routerLink]='[""]'> My blog </button>
<button mat-button [routerLinkActive]='["link-active"]' [routerLink]='["/addpost"]'>
Add Post
</button>
</mat-toolbar>Add BlogEditorComponent styles
We will add styling for blog editor in 📝styles.scss file with the following code:
.ck-editor__editable {
max-height: 350px;
min-height: 350px;
}
pre {
display: block;
padding: 9.5px;
margin: 0 0 10px;
font-size: 13px;
line-height: 1.42857143;
color: #333;
word-break: break-all;
word-wrap: break-word;
background-color: #f5f5f5;
border: 1px solid #ccc;
border-radius: 4px;
}
blockquote {
display: block;
padding: 10px 20px;
margin: 0 0 20px;
font-size: 17.5px;
border-left: 5px solid #eee;
}
img{
max-width: 100%;
}Test it out
Open the browser and click on “AddPost” button on the nav-bar. You will be navigated to the blog editor page. Add a new blog and click on save button to save the blog in thee database. Open the firebase console, navigate to your project overview page and click on “Database” link in the menu on the left. Here you can see the record for your newly added blog.
Last updated
Was this helpful?