Sunday, 24 April 2016

How to add CKEDITOR in MVC 5

1 comment
Do you know how to integrate CKEDITOR to ASP.NET MVC application.In this article i am going to tell you how to add CKEDITOR to MVC 5 application.

What is CKEDITOR:

  Ckeditor is a ready for use HTML text editor designed to simplify the web content creation.It's a         WYSIWYG editor that brings common word processor features directly to your web pages.                 Enhance your website experience with our community maintained editor.
  Features of Ckeditor:
  1. open source
  2. Community Driven
  3. Fully Customizable
  4. Enriches website experience
  5. High standard of quality
  6. Free.
  7. Compatibility with different browsers.

How to add CKeditor to MVC 5 application:

Step 1: Create MVC 5 application.
1.Open Visual studio 2013 or 2015-->File Menu-->New-->Project.
2.Select ASP.NET web application template-->choose Empty in new project window-->Check MVC checkbox-->click Add button.
3.Visual studio adds default folders to the mvc 5 application.

Step 2: Download Ckeditor form here Download ckeditor.
1.Extract the downloaded folder.
2.copy folder in visual studio solution.


3.I added Ckeditor folder in Scripts folder.

Step 3: Add reference to ckeditor files in _Layout.cshtml page and remove all other references.
<script src="~/Scripts/jquery-1.10.2.js"></script>
    <script src="~/Scripts/ckeditor/ckeditor.js"></script>
    <link href="~/Content/Bootstrap.min.css" rel="stylesheet" />
Step 4: Add Controller and Views
1.Right click controllers folder-->Add-->Controller-->Select Empty Controller-->name it as HomeController.cs-->click ok.
2.Right click Index action method-->Add View-->click ok.
3.Replace Index view with following code.
<title>A Simple Page with CKEditor</title>
@using (Html.BeginForm("ckeditor", "Home", FormMethod.Post, new { style="margin-top:100px;"}))
{ 
    @Html.Label("The Badboy Web Editor")<br/>
    @Html.TextArea("editorplace", new { @id = "editor1" })
        <input type="submit" value="Submit" id="btnSubmit"/>
        <script>
            // Replace the <textarea id="editor1"> with a CKEditor
            // instance, using default configuration.
            CKEDITOR.replace('editor1');
        </script>
}
Note: Here Textarea id value must be replaced with Ckeditor using replce() method as shown in script tag.



Now run application you will get browser window like this.


Here we are replacing the Text area by Ckeditor. So,Texta area contains all data of Ckeditor. We can save the data of textarea using model binding or also we can send ckeditor data using jquery ajax method based on the textarea "id & name" values.
Download source from here Downlaod.
Conclusion :
I hope this article useful to every reader.i will  meet you in another tutorial.

1 comment:

  1. this doesn't work, it receives null data in action when submitting

    ReplyDelete