Adding CKEDITOR In MVC 5

Creating a MVC Project

Step 1

Open Visual Studio.

Step 2

Go to File => New Project.

1. Select Visual C# => Web => ASP.NET Web Application.
2. Name your solution (eg. EasyCRM) and Project (EasyCRM.UI) and then click OK.
3. Select MVC.
4. Change the authentication to the individual accounts.
   
   
   

Now, you will see the screen given below.

Creating Blank Database

Step 1

Open SQL Server.

Step 2 

Connect to the database Server.

Step 3

Right click on the database to "Create New Database".

Now, let's just create a sample table named blog with the columns given below.

CREATE TABLE [dbo].[Blogs](
[Id] [int] IDENTITY(1,1) NOT NULL,
[Title] [nvarchar](200) NULL,
[Description] [nvarchar](max) NULL,
[Image] [nvarchar](128) NULL,
[IsActive] [bit] NULL,
[PostedBy] [nvarchar](256) NULL,
[PostedOn] [datetime] NULL,
CONSTRAINT [PK_Blogs] PRIMARY KEY CLUSTERED
(
[Id] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]

 

The table looks, as shown below.

Creating DAL (Data Access Layer)

Step 1

Right click on Solution Explorer to add new project.

Step 2

Select Visual C# => Windows => Class Library.

Adding Entity Framework on DAL Project

Step 1

Right click on EsyCRM.DAL Project.

Step 2

Select Add New Item.

Step 3

Select ADO.NET Entity Model, as shown below.

Step 4

Now, select EF Designer from the database.

Step 5

Connect to the database server.

Step 6

Provide correct credentials to connect to the database, as shown below.

Step 7

Select Yes, include the sensitive data in the connection string and click NEXT.

Step 8

Select Blog Table and click Finish.

Now, Visual Studio will create a new class called Blog.cs, using Entity Framework, as shown below.

Now, rebuild the application

Referencing DAL Project to UI Project

Step 1

Right click on References of UI project to add the references.

Now, let's create CRUD operation for Blog table, using Scaffolding.

After Scaffolding you will see as in fig

Adding Ckeditor in UI Project

Step 1

Download CkEDITOR from http://ckeditor.com/download

Step 2

Extract CkEDITOR.

Step 3

Add the new folder named "Themes" in UI project.

Step 4

Copy the extracted CkEDITOR to Themes folder, as shown below.

Step 5

Open View => Blogs => Create.cshml

Step 6

Add the reference to ckeditor.js file, as shown below.

<script src="~/Themes/ckeditor_full/ckeditor.js"></script>

 

Step 7

Now, modify the code, as shown below.

<div class="form-group"> @Html.LabelFor(model => model.Description, htmlAttributes: new { @class = "control-label col-md-2" })
    <div ass="col-md-10"> @Html.TextAreaFor(model => model.Description,n ew { @id = "FullDescription", @class = "form-control", @rows = "200" }) @Html.ValidationMessageFor(model => model.Description, "", new { @class = "text-danger" })
        <script>
            CKEDITOR.replace("FullDescription");
        </script> @*@Html.EditorFor(model => model.Description, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.Description, "", new { @class = "text-danger" })*@ </div>
</div>

 

Step 8

Run the Application and navigate to the Create method of the Blog controller

Summary

We have successfully added CKEDITOR in MVC Application. You can also use CKEDITOR in other Web applications in the same manner.