CKEditor example in ASP.NET MVC 3, MVC 4 application.


Modifying html text area using Razor view engine and C# in ASP.NET MVC 3,4

Download this project.

After you finish this tutorial your textarea should look like this :


1. Create new ASP.NET MVC 3 Web Application project and name it CKEditor. Choose Razor view engine and internet application.




2. Go to http://ckeditor.com/download and download latest version. Unzip the file and copy ckeditor folder.

3. Inside your solution explorer right click on the name of solution and select paste.



4. Now go to Views – Shared and open _Layout.cshtml file. Inside this file we want to add reference to ckeditor.js, so we do not have to add this in every view.




5. Open ckeditor folder and drag and drop skeditor.js file under other js references

 
Go to Views - Home – About.cshtml. Delete the section <p></p> and type
@Html.TextArea("editor", new {@class = "ckeditor", @id = "aboutme"})

Using above code will produce this html code :  

<textarea class="ckeditor" cols="20" id="aboutme" name="editor" rows="2">

</textarea>


Please keep in mind that you have to add class “ckeditor” to every textarea you are using in your application. Field id and name are also required, otherwise ckeditor will not work.

You can find attachment with complete project.

Regards, Adam Bielecki.


Comments

  1. 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?

    ReplyDelete
    Replies
    1. Have you added reference to ck js inside your partial view?
      By default partial views are not using any layout and as you can see in layout there is reference to ckeditor.js.

      Add src="../../ckeditor/ckeditor.js" type="text/javascript"> within script, to you partial view and that should solve the issue.

      Let me know if that save the problem.

      Cheers.

      Delete
  2. Is it possible to have the ckeditor reference inside partial view ?? I show the partial view only when it is needed. It saves me 1sec while loading my home page

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. Thanks for your sharing! Very useful!

    ReplyDelete
  5. Thanks for the tutorial,
    Can you explain more this step:
    5. Open ckeditor folder and drag and drop skeditor.js file under other js references

    ReplyDelete
    Replies
    1. That means you have to include your ckeditor.js file into the view you are using.

      Delete
  6. When tried to open in showModalDialog().
    It says 'ckeditor' is undefined.
    for this line of code 'ckeditor = ckeditor.replace('aboutme');'
    Please help me out.

    ReplyDelete
  7. Hi. showModalDialog is deprecated :
    https://developer.mozilla.org/en-US/docs/Web/API/Window.showModalDialog

    I would suggest to use fancy box and include ckeditor js reference or use partial view.
    Make sure if you are using partial view you include reference to ckeditor.js file.

    ReplyDelete
  8. Thanks for sharing :)
    My project is nearly done but one function fail to work. That's the video uploader, can you please give me some advice?

    ReplyDelete
  9. Nice and simple tutorial but it does not work with version 4.4.6 (25 Nov 2014). Downloaded CKEditor 3.6.6.2 (15 Jul 2014) and it works flawlessly. Did not test with CKEditor 4.3.5 (23 Apr 2014) though.

    ReplyDelete

Post a Comment