Use of CKEditor (Rich Text Editor) with Razor for MVC Application
B Sahoo Posted On : 05/04/2013
About Author
Biswaranjan Sahoo have good working and teching experience in Microsoft technology.

Use of CKEditor (Rich Text Editor) with Razor for MVC Application

Introduction

CKEditor is one of the most popular web text editors nowadays. In this article, we will create a MVC application for rich text editing. Before starting, I will like to tell about CKEdtor.

CKEditor

CKEditor (formerly FCKeditor), the official site is http://ckeditor.com/ is a ready-for-use open source WYSIWYG text editor from CKSource designed to bring common word processor features directly to web pages, simplifying their content creation. It aims to be lightweight and requires no client-side installation.

Its core code is written in JavaScript, having server-side connectors with Active-FoxPro, ASP, ASP.NET, ColdFusion, Java, JavaScript, Lasso, Perl, PHP, Python and Ruby on Rails.

CKEditor brings to websites popular editing features found in desktop word processors such as: styles formatting (bold, italic, underline), web resource linking, a safe undo function, paste from Word and other common HTML formatting tools.

CKEditor 4.0 has been redesigned to provide website owners and developers new customization tools. The editor can be fitted with plugins and a skin selected from the CKEditor add-ons repository. Virtually every element of the editor is now modular, facilitating third-party plugin and skin contributions.

Getting Start

We have to create MVC Application. I am using MVC4. You can use MVC3 or MVC4. Just follow the steps with me.

STEP :1

Select "New Project" from File Menu. Choose "ASP.NET MVC 4 Web Application" and named the application "CKEditorWithMVC".

STEP:2

Choose  "Basic" Project template and select "Razor" from View Engine dropdown.

STEP:3

Select Project, right click on it. Choose "Manage NuGet Packages" tab.

STEP:4

Search CKEditor & install CKeditor.MVC package in application.

It took few second to install. Now you can check, A chkeditor folder is already added to Scripts Folder.

STEP:5

Now add a folder named as ViewModel to Project. Add a class file named as "User". include 2 properties "usrName" & "userDesc" to it.

public class User
{
public string userName { get; set; }
public string userDesc { get; set; }
}

STEP:6

Add a Controller on right clicking on Controller Folder in MVC application. Rename the controller as "ckEditor".

By default, it create Index Action. Add ViewModel in namespace.

STEP:7

Create strongly Type View. for that, right click on ActionResult and Checked "Create a Strongly-typed view" checkbox. select "User" from Model class dropdown. Then click on Add button.

Add ckeditor.js and jquery.js in View. Check the below code for View.

<script type="text/javascript"src="@Url.Content("~/scripts/ckeditor/ckeditor.js")"></script>
<script type="text/javascript"src="@Url.Content("~/scripts/ckeditor/adapters/jquery.js")"></script>
@using (Html.BeginForm("Display","ckEditor",FormMethod.Post))
{
<center>
<divstyle="width:50%;background-color:#c3c3c3; border: 1px solid #000000;padding:10px;height:500px; padding-bottom:10;">
<divstyle="width:24%;float:left;padding-bottom:10px;">
User Name :
</div>
<divstyle="width:74%;float:left;text-align:left;padding-bottom:10px;">
@Html.TextBoxFor(m => m.userName)
</div>
<divstyle="width:24%;float:left;padding-bottom:10px;">
User Desc :
</div>
<divstyle="width:74%;float:left;text-align:left;padding-bottom:10px;">
@Html.TextAreaFor(m => m.userDesc,new { @class= "ckeditor" })
</div>
<divstyle="width:90%;float:left;padding-bottuteom:10px;">
<inputtype="submit"value="SUBMIT"/>
</div>
</div>
</center>
}

STEP:8

Create another ActionResult with same name as form name in Index View with HttpPost & ValidationInput(false) attribibute and ViewModel as input parameter.

[HttpPost]
[ValidateInput(false)]
publicActionResult Display(CKEditorWithMVC.ViewModel.User _db)
{
return View(_db);
}

STEP:9

We have to create strongly typed view for Display Action. For that, we have to follow same step as STEP:7. Designed the Display View for display.

<table>
<tr>
<td>
UserName
</td>
<td>
@Model.userName
</td>

</tr>
<tr>
<td>
user Desc
</td>
<td>
@Html.Raw(Model.userDesc)
</td>
</tr>
</table>

STEP:10

We almost reached for Final step. Now open RouteConfig file from App_Start folder of application to set Router. Change Controller name "Home" to "ckEditor".

routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "ckEditor", action = "Index", id = UrlParameter.Optional }
);

Finally we complete our designing and coding part. Now run the application and start use of text editor. On display page u can see the formatted text.

Post your Suggetion or Comment
Name :
Email Address :
Comment :