Home > MVC > Use CKEditor on MVC 3 Razor Website

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 ASP.net 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

VN:F [1.9.22_1171]
Rating: 8.9/10 (21 votes cast)
Use CKEditor on MVC 3 Razor Website, 8.9 out of 10 based on 21 ratings

Categories: MVC Tags:
  1. otaku-san76
    December 15th, 2011 at 23:25 | #1

    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 🙂

    VA:F [1.9.22_1171]
    Rating: -1 (from 3 votes)
    • jcrawfor74
      December 16th, 2011 at 12:35 | #2

      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.

      VN:F [1.9.22_1171]
      Rating: 0 (from 0 votes)
  2. otaku-san76
    December 17th, 2011 at 04:38 | #3

    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 ? 🙂

    VA:F [1.9.22_1171]
    Rating: +1 (from 1 vote)
  3. otaku-san76
    December 17th, 2011 at 04:42 | #4

    (with an example for ckeditor). could you copy/paste your code please ?

    VA:F [1.9.22_1171]
    Rating: 0 (from 2 votes)
    • jcrawfor74
      December 18th, 2011 at 19:49 | #5

      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

      VN:F [1.9.22_1171]
      Rating: +1 (from 1 vote)
  4. sudhakar
    October 30th, 2012 at 05:43 | #6

    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();
    }

    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
    • jcrawfor74
      October 30th, 2012 at 21:53 | #7

      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.

      VN:F [1.9.22_1171]
      Rating: 0 (from 0 votes)
  5. March 21st, 2013 at 22:40 | #8

    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?

    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
    • jcrawfor74
      March 22nd, 2013 at 00:54 | #9

      @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

      VN:F [1.9.22_1171]
      Rating: 0 (from 0 votes)
  6. Shivanand Arur
    June 12th, 2013 at 17:12 | #10

    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?

    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
    • jcrawfor74
      June 12th, 2013 at 21:37 | #11

      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.

      VN:F [1.9.22_1171]
      Rating: 0 (from 0 votes)
  7. Farhad
    September 27th, 2014 at 20:13 | #12

    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

    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  1. No trackbacks yet.