Tuesday, 19 February 2013

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.


Posted by at
Labels:

11 comments:

  1. cientonoventaytres21 March 2013 at 11:10

    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. Adam Bielecki31 March 2013 at 23:55

      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. Me15 May 2013 at 12:41

    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. Cecily2 October 2013 at 03:11

    This comment has been removed by the author.

    ReplyDelete
  4. cythilya2 October 2013 at 03:17

    Thanks for your sharing! Very useful!

    ReplyDelete
  5. mazen Aounallah19 October 2013 at 12:00

    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. Adam Bielecki27 October 2013 at 12:00

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

      Delete
  6. virali27 January 2014 at 07:06

    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. Adam Bielecki3 February 2014 at 12:48

    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. Việt Sơn7 April 2014 at 05:05

    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. Kevin12 December 2014 at 07:59

    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

Subscribe to: Post Comments (Atom)