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:
- 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 ASP.net control that can be downloaded but this is not required to make it work with MVC. - Unzip the downloaded package
- In windows explorer copy the “ckeditor” folder into the root folder of your website.
- In Visual studio and click the “Show All Files” icon.
- right-click on the ckeditor folder and choose include in project, this can take a little while..
- In the <head> of your _Layout.cshtml file reference the ckeditor.js file
<script src="@Url.Content("~/ckeditor/ckeditor.js")" type="text/javascript"></script> - Create a model class with a property you wish to bind to your HTML editor
- Create a strongly-typed view (use scaffold template of edit if you like)
- 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
Categories: MVC
Hi. Thanks for your tutorial.
I use ASP.NET with mvc4 and razor.
In my view, i wrote this code :
@Html.TextAreaFor(model => model.Details, new { @class=”ckeditor”, @id=”text-details”})
But i got an error , “Details” seems to be unknown. What do i must do ?
Thanks again
The “model.Details” example, will only work if your “Model” object has a property called Details. To clarify there is a step missing “Create a strongly typed view”, and then on the view page insert the sample code where “model.Details” is the property of you model object you want bound to your control. I will udpate the post to include this step.
Ok thanks, understood. My problem is about the creation of the model class, i never did it before. Could you explain me how to do please ?
(with an example for ckeditor). could you copy/paste your code please ?
The best tutorial for understanding MVC would be the MVC Music Store sample, Download the PDF document and this should answer most questions regarding MVC. MVC Music Store – Downloads