Enter your keyword

CKEditor Setup & Configuration

CKEditor Setup & Configuration

CKEditor Setup & Configuration

Very often you will find yourself in need of a rich text editor on your website. Unlike for Content Management Systems like WordPress, Joomla, Drupal, among others that have an option of installing editors with ease as plugins, its more likely that you will do the donkey work yourself adding an editor to the project.

In this tutorial I will show you how to setup, and configure CKEditor on your website. I having used a number editors including TinyMCE, Bootstrap Rich Text Editor, among others and CKEditor is my editor of choice as its very easy to integrate into your website and has a very rich users forum in case you’re in need of help.


Installation:

The best option for using any third party plugin in your project is to use their CDN instead of self hosting the scripts.

<script src="//cdn.ckeditor.com/4.5.7/standard/ckeditor.js"</script>

However, there are times when you need to self-host it, for example if you’re developing offline with no internet connection. In that case, download the editor and unzip it into your working directory. For a production site its recommend that you get the default Standard Package else you can download the Full Package instead.

<script src="path_to/ckeditor/ckeditor.js"></script>

Next initialize the editor by replacing textarea with it using that textarea ‘name‘ or ‘id‘ – with no preceeding (#) like;

CKEDITOR.replace( 'textarea_name' );

Troubleshooting your offline installation;

In most cases the offline installation with be straightforward, but in some cases you will find that CKEditor can’t find/locate the configuration file, language files, and skins.

This is simply because the editor is looking in the root directory and for these files, therefore if these files are not there you should simply change its base-url to point to where the files are before initializing the editor. “The path must end with a forward slash (/)

CKEDITOR_BASEPATH = "path_to/ckeditor/";

Configuration

Now that you’ve managed to install CKEditor with default configurations, lets look at how you can customize the editor to suit your specific needs.

CKEDITOR.replace( 'textarea', {
   /* pass configurations here */
} );

Changing skins;

You can add different skins that are compatible with your CKEditor version and add them to the editor by simply giving the skin name and the full URL separated by a comma. (the URL must end with ‘/’)

{
   skin : 'skin_name,path_to_skin'
}
/*
 skin: 'moono,skins/moono/' - default skin
 skin: 'moonocolor,skins/moonocolor/'
 skin: 'office2013,skins/office2013/'
 skin: 'minimalist,skins/minimalist/'
 */
ckeditor moono default skin

CKEditor Moono default skin

ckeditor moonocolor skin

CKEditor Moonocolor skin

ckeditor minimalist skin

CKEditor Minimalist skin

ckeditor office2013 skin

CKEditor Office2013 skin


Customize Toolbars;

When you download CKEditor you choose a distribution that best fits your needs. These are; basic (17 plugins), standard (48 plugins), and full package (72 plugins). Compare packages.

It is a bad practice to download more than you need and then remove plugins or buttons in your configuration. You will only be loading unnecessary stuff without any good reason. Therefore you may choose to download a customized version of the editor by using the builder. This gives an option to choose a present, select your plugins (add/remove) and skin, as well as a language for your build.

Using CDN

<script src="//cdn.ckeditor.com/version.number/distribution/ckeditor.js"></script>

If you so wish to customize the toolbar differently from these default options, its recommended that you use the toolbar configurator included in your installation.
Else you can manually specify the different actions you want to appear on the toolbar like this;

{
   toolbar:[
      [ 'clipboard', 'undo', '-', 'Cut', 'Copy', 'Paste','-', 'Undo', 'Redo' ],
      [ 'mode', 'Source' ],
      [ 'Format', 'Font', 'FontSize' ],
      [ 'TextColor', 'Bold', 'Italic' ]
   ]
}
{
   toolbar:[
      { name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste','-', 'Undo', 'Redo' ] },
      { name: 'document', groups: [ 'mode' ], items: [ 'Source'] },
      { name: 'styles', items: [ 'Format', 'Font', 'FontSize'] },
      { name: 'basicstyles', groups: [ 'basicstyles'], items: [ 'TextColor','Bold', 'Italic'] }
   ]
}

Both toolbar configurations above, will result into the toolbar below, therefore choose which style of declaring toolbar items best suits you. Get the complete list of toolbar items for details.

ckeditor custom toolbar

CKEditor Custom Toolbar


Extending CKEditor with plugins;

Lets try adding ‘Code Editor‘ plugin to our editor and also set it to display on the toolbar. TheCode Editor’ plugin easily helps you to better write code blocks to your articles. It adds the ACE Code Editor to improves the behavior of a textarea element. It creates a pre tag into your ckeditor so that you can include your preferred syntax highlighter.

Download the Code Editor plugin and add it your project in the plugins folder. Declare it as an extra plugin and add it as a toolbar item.

{
   extraPlugins: 'pbckcode', 
   toolbar: [ 
      [ 'clipboard', 'undo', '-', 'Cut', 'Copy', 'Paste','-', 'Undo', 'Redo' ], 
      [ 'TextColor', 'Bold', 'Italic' ], 
      [ 'Format', 'Font', 'FontSize' ], 
      [ 'pbckcode' ] 
   ] 
}

Incase, you’re using CDN or you plugins are not in the default plugins folder, you must add the plugin before using, so that CKEditor knows from where to load the plugin from.

CKEDITOR.plugins.addExternal( 'pbckcode', 'path_to_plugin/pbckcode/', 'plugin.js' );

The CKEDITOR.plugins.addExternal() method accepts three parameters:

  • The name of the plugin.
  • The location of the plugin. Make sure that the path starts with a slash character (“/”).
  • File name (usually “plugin.js”).
CKEditor PBCKCODE Plugin

CKEditor PBCKCODE Plugin

Thank you for following this lengthy tutorial and hope your now able to use CKEditor in your project/webiste. Please comment below in case of any inquires regarding this particular tutorial, and you can contact me if there is anything you wish us to cover on this blog.

Source Code