CKEditor example in ASP.NET MVC 3, MVC 4 application.

Modifying html text area using Razor view engine and C# in ASP.NET MVC 3,4

Download this project.

After you finish this tutorial your textarea should look like this :

1. Create new ASP.NET MVC 3 Web Application project and name it CKEditor. Choose Razor view engine and internet application.

2. Go to http://ckeditor.com/download and download latest version. Unzip the file and copy ckeditor folder.

3. Inside your solution explorer right click on the name of solution and select paste.

4. Now go to Views – Shared and open _Layout.cshtml file. Inside this file we want to add reference to ckeditor.js, so we do not have to add this in every view.

5. Open ckeditor folder and drag and drop skeditor.js file under other js references

 

Go to Views - Home – About.cshtml. Delete the section <p></p> and type
@Html.TextArea("editor", new {@class = "ckeditor", @id = "aboutme"})

Using above code will produce this html code :  

<textarea class="ckeditor" cols="20" id="aboutme" name="editor" rows="2">

</textarea>

Please keep in mind that you have to add class “ckeditor” to every textarea you are using in your application. Field id and name are also required, otherwise ckeditor will not work.

You can find attachment with complete project.

Regards, Adam Bielecki.