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
No related posts.
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