Introduction

In this article, we will learn how to add a text editor in an Angular 8 application. The text editor is a program for adding and editing text. In this demo, we will use an ng2-ckeditor editor. Learn more about Cheditor with their official docs.

 Prerequisites

  • Basic Knowledge of Angular 2 or higher.
  • Visual Studio Code.
  • SQL Server Management studio.
  • Node and NPM installed.
  • Bootstrap.

Step 1

 Create an Angular project by using the following command:

Step 2

Open this project in Visual Studio Code and install Bootstrap by using the following command:

Now, open the styles.css file and add a Bootstrap file reference. To add a reference in the styles.css file, add this line:

You may also like: 
Angular: Everything You Need to Know [Tutorials].

Step 3

Now, install the ng2-ckeditor library in this project. To install the ng2-ckeditor library use the following command:

Now, add the CKEditor JavaScript reference in the index.html file by opening the index.html file and adding the following line:

Step 4  

Now, include the CKEditorModule in the app.module.ts file.

Importing the CKEditorModule 

Step 5

 Now, create a service to call the Web API by using the following command:

Now, add the following line in the Content.service.ts file:

Step 6

Create a class named, “Content,” with the following code:

Step 7

Now, let’s create three new components by using the following commands:

  1. Texteditor.
  2. Pagecontent.
  3. detailspost.

Step 8

Now, open the texteditor.component.html file and add the following HTML code to design the registration form:

  

Open the texteditor.componet.ts file and add the following lines:

Step 9 

Now, open pagecontent.component.html and add the following HTML:

 

Open the pagecontent.componet.ts file and add the following lines:

Step 10

Now, open detailspost.component.html and add the following HTML:

Open detailspost.componet.ts file and add the following lines:

Step 11

Now, open the app-routing.module.ts file and add the following lines to create routing:

Step 12 — Create a new Web API Project

Open Visual Studio and create a new project. 

Creating a new project in VS Code 

Change the name to Texteditor

Select Web API as the template.

Right-click the Models folder from Solution Explorer and go to Add >> New Item >> data

 

Click on the ADO.NET Entity Data Model option and click Add.

 

Select EF Designer from the database and click the Next button and add the connection properties. Select the database name on the next page and click OK.

Check the Table checkbox. The internal options will be selected by default. Now, click on the Finish button. 

Our data model is created now.

Step 13

Right-click on the Models folder and add a class Response. Now, paste the following code in the class. 

   

Right-click the Controllers folder and add a new controller. Name it “Content controller” and add the following namespace in the Content controller.

Now, add a method to insert and update data into the database.

Step 14 – Complete Content Controller Code 

Step 15

Now, let’s enable CORS. Go to Tools, open NuGet Package Manager, search for CORS, and install the Microsoft.Asp.Net.WebApi.Cors package. Open the Webapiconfig.cs file and add the following lines:

Step 16

Now, go to Visual Studio Code and run the project by using the following command: npm start.

Enter some values, add styles to the text, and click on the submit button.

 

Click on the details button and check the output. You should have something like the following image.   

 

Summary

In this article, we learned how we integrate a text editor in an Angular application.

Further Reading



Source link

Write A Comment