Adding CKEDITOR In MVC 5

Creating a MVC Project

Step 1

Open Visual Studio.

Step 2

Go to File => New Project.

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.

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.

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>