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

on

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

    This comment has been removed by the author.

    ReplyDelete
  4. Unknown2 October 2013 at 03:17

    Thanks for your sharing! Very useful!

    ReplyDelete
  5. Mazen19 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. Pig7 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
  10. Sankar7 December 2019 at 17:56

    A IEEE project is an interrelated arrangement of exercises, having a positive beginning and end point and bringing about an interesting result in Engineering Colleges for a particular asset assignment working under a triple limitation - time, cost and execution. Final Year Project Domains for CSE In Engineering Colleges, final year IEEE Project Management requires the utilization of abilities and information to arrange, plan, plan, direct, control, screen, and assess a final year project for cse. The utilization of Project Management to accomplish authoritative objectives has expanded quickly and many engineering colleges have reacted with final year IEEE projects Project Centers in Chennai for CSE to help students in learning these remarkable abilities.



    Spring Framework has already made serious inroads as an integrated technology stack for building user-facing applications. Spring Framework Corporate TRaining the authors explore the idea of using Java in Big Data platforms.
    Specifically, Spring Framework provides various tasks are geared around preparing data for further analysis and visualization. Spring Training in Chennai

    ReplyDelete

Post a Comment