Use CKEditor on MVC 3 Razor Website

This post provides the basic steps the implement a CKEditor control into your MVC Razor web page.

This post assumes you have a working MVC website, with a standard _Layout.cshtml page.

Follow these easy steps:

  1. Download the latest version of the CKEditor from here
    You only need to download the basic package.

    At the time of writing I downloaded the zip file of CKEditor 3.6.2

    You will see there is an control that can be downloaded but this is not required to make it work with MVC.

  2. Unzip the downloaded package
  3. In windows explorer copy the “ckeditor” folder into the root folder of your website.
  4. In Visual studio and click the “Show All Files” icon.
  5. right-click on the ckeditor folder and choose include in project, this can take a little while..
  6. In the <head> of your _Layout.cshtml file reference the ckeditor.js file
    <script src="@Url.Content("~/ckeditor/ckeditor.js")" type="text/javascript"></script>
  7. Create a model class with a property you wish to bind to your HTML editor
  8. Create a strongly-typed view (use scaffold template of edit if you like)
  9. Now the easy bit, the way this works is by generating a <textarea> control with the class of “ckeditor” and an id, so the html for this would look like the following. Note the id can be anything you want.
    <textarea class="ckeditor" id="text-details" name="Details">some text</textarea>

    To generate this in MVC use the following

    @Html.TextAreaFor(model => model.Details, new { @class="ckeditor", @id="text-details"})

    where model.Details is the property of the strongly-typed class you passed through

That’s it. Run the site and visit the page. Your text area control will be rendered as the CKEditor control.

Happy editing