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
[js]
<script src="@Url.Content("~/ckeditor/ckeditor.js")" type="text/javascript"></script>
[/js] - 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.
[html]
<textarea class="ckeditor" id="text-details" name="Details">some text</textarea>
[/html]
To generate this in MVC use the following
[csharp]
@Html.TextAreaFor(model => model.Details, new { @class="ckeditor", @id="text-details"})
[/csharp]
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
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
Ima getting below error
A potentially dangerous Request.Form value was detected from the client (text=”
cbvnbvn
“)
when click on submit button
iam using below code
in view
@using (Html.BeginForm(“Index”, “Home”, FormMethod.Post))
{
@Html.TextAreaFor(model=>model.text, new {@class=”ckeditor”,@id=”text-details”})
}
In conroller
[HttpPost]
public ActionResult Index(Editor model)
{
ViewBag.Message = “Welcome to ASP.NET MVC!”;
return View();
}
The trick is that the CKEditor is passing back html to the model.
MVC has built in protection against cross-site scripting attacks.
For this particular control to work you will need to add the [AllowHtml] attribute on your model class.
In your model class, add
[AllowHtml]
public string text { get; set; }
In my case I am using this in a secure admin page, but if you were putting this control on a publically available section of your website you may need to do some validation to protect yourself from cross site scripting and injection attacks.
Let me know if this works.
Hi
How configure ckeditor in partial view?
I added the same example but in partial view don’t show me the ckeditor. Only textare no ckeditor
How I can resolve this problem?
@Ricardo
Hi,
I have just tested CKEditor in a basic Partial View and it worked fine.
In my CommonController.cs, I Added
[ChildActionOnly]public ActionResult Editor()
{
return PartialView();
}
I then created the partial view (Right Click in method, Create View, tick create as partial view).
In the generated Editor.cshtml I added the following:
@Html.TextArea("TextEditor", "Test Text", new { @class = "ckeditor", @id = "text-details" })(In this example I did not have a model that I wanted to populate the control with text from).
To reference the PartialView in my Layout.cshtml I added a line as follows:
@{Html.RenderAction("Editor", "Common"); }This all worked fine. Please ensure you have a javascript reference the the ckEditor.js
<script src=”@Url.Content(“~/ckeditor/ckeditor.js”)” type=”text/javascript”></script>
If this is still not working, get it working on a simple page (no partial view), if you can get that working you should be able to get the partial view working
Cheers
Hey your article has helped me…. Thank you very much.
But I am getting an issue while working with this control. This issue is with Internet Explorer browser. Whenever I run my MVC application, this control gets filled with some data. This works properly with Google Chrome and Mozilla Firefox. But when I try to run the app with IE, it gives me the following error message.
“Unhandled exception at line 285, column 105 in http://localhost:62131/ckeditor/ckeditor.js”
“0x800a138f – JavaScript runtime error: Unable to get property ‘getEditor’ of undefined or null reference”
Just FYI, I am using IE10. Can you help me solve this issue?
Hi,
A quick search of the interweb found this post..
CkEditor forum – JavaScript-error-Full-Version-v.s.-Standard-Version
I have just downloaded the full and standard versions (4.1.2) and am unable to reproduce any issues, and I am running with IE10. My suggestion would be to try the various versions, and potentially check what “Browser Mode” or “Document Mode” you are running in. Press F12 (launches the developer toolbar) and see the last two menu items on the toolbar. These settings can impact the way the browser renders the page and could be contributing to your javascript error.
Hay Bros! i am using ckeditor for the purpose of to edit a model’s data. But an attribute of my model is not rendering in the ck editor??? plz help