Using CKEditor in ASP.NET MVC

If you’re using ASP.NET MVC, setting up CKEditor is pretty straightforward from NuGet, especially if you’re using jQuery as well.

1. First, install it from NuGet:

Image may be NSFW.
Clik here to view.

2. By default, it will put the files under the Scripts directory. I prefer to have it under /js/libs, so I move it there after it’s done downloading.

3. After that, select a view (.cshtml) file and after jquery is loaded, include the following .js files:

<script src="../../js/ckeditor/ckeditor.js" type="text/javascript"></script>
<script src="../../js/ckeditor/adapters/jquery.js" type="text/javascript"></script>

4. Now, assuming you have a textarea of id=”message”:

<textarea id="message"></textarea>

apply the following method:

$("#message").ckeditor();

5. At this point, you’re done with CKEditor with the default settings.

6. If you want to configure the editor, update the config.js. The following makes the textarea 500px and shows a limited number of tool buttons:

CKEDITOR.editorConfig = function (config) {
  config.width = 500;
  config.toolbar =
  [
    [
      'SourceBold',
      'Italic',
      'Underline',
      'Strike',
      '-',
      'Subscript',
      'SuperscriptNumberedList',
      'BulletedList',
      '-',
      'Outdent',
      'Indent/Styles',
      'Format',
      'Font',
      'FontSize'
    ]
  ];
};

This is what it’ll look like:

Image may be NSFW.
Clik here to view.

You might want to check out the other configuration settings for the toolbar. Check out the settings and jQuery CKEditor adapter.

Image may be NSFW.
Clik here to view. Image may be NSFW.
Clik here to view. Image may be NSFW.
Clik here to view. Image may be NSFW.
Clik here to view. Image may be NSFW.
Clik here to view. Image may be NSFW.
Clik here to view. Image may be NSFW.
Clik here to view. Image may be NSFW.
Clik here to view. Image may be NSFW.
Clik here to view. Image may be NSFW.
Clik here to view. Image may be NSFW.
Clik here to view. Image may be NSFW.
Clik here to view. Image may be NSFW.
Clik here to view.