CkEditor in MVC

Introduction:

CkEditor is a rich text editor which helps us store formatted content in html format. It can be used to edit HTML content in any given document.

In this tutorial, we will learn how to implement CKEditor in our .Net web application to create a new post for a blog website.

Description:

For this tutorial, I will use Visual studio 2019. We will create a new web application as follows:

Give an appropriate name to your application and click on create

For this tutorial, we will make this a MVC application

Once our application is created, let’s go and create our database with following table

We will use entity framework for inserting into the database table. So for that we will create an Entity data model. Right click on project and add a new item as in the following image

Add a new connection (if not exists)

Add SQL server name and select a database. You can choose to test connection to check if everything is going right. Once done, click on Ok

Save connection settings in Web.config file and click on next

Select the table(s) as per requirement and click on Finish. With this the edmx file will be created

Now, we will add a new controller with views

Add details for Model class, data context file and layout file for the view pages

This will create the views for operations along with controller methods for the same.

We will now add the CkEditor package to our project. Right click on project and go to the ‘Manage NuGet Packages.’ options. Go to the browse tab and search for “ckeditor”. You can choose from many available options as per your requirement. I have used the ‘ckeditor-standard’ package for this tutorial

Now, since we won’t be taking CreatedDate as an input value from the view page, we will remove the following code from our Create view page

Once this is done, we can run and check our project for creating a new post. By default, we have the text box to add the Post description

When we click on create a text value is inserted in the table. You can check the same for yourself in the database.

In real world scenarios, we will need formatting for the post description. For example, we will need bold letters for the title of the post and so on. To implement that, we will make use of CkEditor rich text box.

For that, we have to first add the [AllowHtml] data annotation to our model class “PostDescription” property. Our Model will look as follows

public partial class PostTb
{
     public int PostId { get; set; }
     public string PostTitle { get; set; }
     [AllowHtml]
     public string PostDescription { get; set; }
     public System.DateTime CreatedDate { get; set; }
}

In our layout page (_Layout.cshtml) we will include the script tag to include ckeditor.js file in the head section below render scripts (or, you can choose to include the script file in the bundle config file and then include in _Layout.chstml).

Head section for the layout page will be as follows

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

    <script src="~/Scripts/ckeditor/ckeditor.js"></script>
</head>

For our view page, we need to change the editor box to text area and add class as “ckeditor”

<div class="form-group">
    @Html.LabelFor(model => model.PostDescription, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
         @Html.TextAreaFor(model => model.PostDescription, new { @class="ckeditor" })
         @Html.ValidationMessageFor(model => model.PostDescription, "", new { @class = "text-danger" })
    </div>
</div>

Post method for Create in controller will look like

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create([Bind(Include = "PostId,PostTitle,PostDescription,CreatedDate")] PostTb postTb)
{
     if (ModelState.IsValid)
     {
          postTb.CreatedDate = DateTime.Now;
          db.PostTbs.Add(postTb);
          db.SaveChanges();
          return RedirectToAction("Index");
     }
     return View(postTb);
}

Now if you run your app, you will see the CKEditor text box for the Post description field.

Enter the post description with formatting as per the requirement

After creation is done, you can check the difference in the SQLserver. I am adding reference data for the same

Summary:

We have successfully implemented CKEditor in our web application.

To implement CKEditor in Angular follow link: CKEditor in angular

To implement CkEditor in Vue.js follow link: CkEditor in Vue.js