how to use ckeditor in asp.net mvc

In this post I will show you how to use ckeditor in asp.net mvc.
Previously I had shown How to...
MVC:

• Forms Authentication in Asp.Net MVC 5
• Cascading DropDowns in Asp.Net MVC
• AngularJS with Web Api in Asp.net MVC using Token based Authentication
• Ajax helper Based Search in MVC
• Customizing Authorize attribute or Role based Authentication or Authorization in MVC
• Display message when user is not authorized in mvc
• How to use AutoMapper
• select option with multiple values
• CRUD operations using Bootstrap Modal in Asp.Net MVC
• Asynchronous Requests for CRUD operations in Asp.Net MVC

Output:

Create new project using visual studio.
Download CkEditor from Here and add the extracted folder in scripts folder.
In Index.cshtml page Add the reference and create Textbox. The entire code looks as shown.

  

@{
    ViewBag.Title = "Home Page";
}
<div class="jumbotron">
    @using (Html.BeginForm("Save", "Home", FormMethod.Post))
    {
        @Html.TextArea("txtEditor", new { @id = "txtEditor" })
        <br />
        <div id="divPreview"></div>
        <button type="submit" value="Submit" class="btn btn-success">Submit</button>
    }
</div>

@section Scripts{
    <script src="~/Scripts/ckeditor/ckeditor.js"></script>
    <script src="~/Scripts/ckeditor/build-config.js"></script>
    <script>
        var selectedTab = "0";
        CKEDITOR.replace("txtEditor", {
            filebrowserWindowWidth: '1140',
            filebrowserWindowHeight: '580',

            filebrowserImageBrowseUrl: '/home/uploadPartial' + '?type=Images&Tab=' + selectedTab
        });

        function updateValue(imgId, imgUrl) {
            document.getElementById(imgId).value = imgUrl;
            document.getElementById('cke_132_textInput').value = 250;
            document.getElementById('cke_135_textInput').value = 156;
        }
    </script>
}

Now Create a imagesVM.cs class in Models folder as shown

  

public class imagesVM
{
 public string Url { get; set; }
}

Now Add a partial View as uploadPartial.cshtml in Views/Home Folder.

  

@model IEnumerable<MVC_Ckeditor.Models.imagesVM>
@{
    Layout = "";
}
<center>
    @foreach (var image in Model)
    {
        <a href="#" class="returnImage" data-url="@Request.Url.GetLeftPart(UriPartial.Authority)@image.Url">
            <img src="@image.Url" alt="Hejsan" id="#image" data-source="@image.Url" width="200" height="200" />
        </a>
    }
</center>
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        function getUrlParam(paramName) {
            var reParam = new RegExp('(?:[\?&]|&)' + paramName + '=([^&]+)', 'i');
            var match = window.location.search.match(reParam);
            return (match && match.length > 1) ? match[1] : null;
        }
        
        $(".returnImage").click("click", function (e) {

            var funcNum = getUrlParam('Tab');
            var img = $(this).attr("data-url");            
            window.opener.updateValue("cke_122_textInput", img);
            window.close();
        });
    });
</script>

In HomeController Add the following ActionResults

  

[HttpPost]
[ValidateInput(false)]
public ActionResult Save(FormCollection cntrl)
{
 StringBuilder sb = new StringBuilder();
 sb.Append(cntrl["txtEditor"]);

 sb.Replace("replace with lessthan symbol", "remove spaces from & l t;");
 sb.Replace("replace with greaterthan symbol", "remove spaces from & g t;");
 return View("Index");
}