4 Common CKEditor Installation Mistakes And How To Avoid Them

In our past blog post entitled “Intro to Customizing CKEditor 4” we have written about the basics of customizing your CKEditor version using the predefined download packages, CKBuilder and the Add-Ons Repository. 

We still notice that members of our community are confused when installing or upgrading their CKEditor package, so in this blog post we would like to highlight the 4 most common mistakes to avoid when downloading and installing CKEditor. Read on for more!

Mistake #1: Installing CKEditor Full Package and not using all of its features.

Decide which CKEditor functionalities are indispensable to your users and build your own package in CKBuilder instead of downloading the full package by default.

Here’s why you should avoid installing the full featured CKEditor without a real necessity for having its 72 plugins in your build:

• The full build merges all plugins into one big ckeditor.js file that stays unchanged even if you decide to block the unused plugins later on. You also waste a lot of time when you manually disable all the redundant features from the full package, one by one.
• The full build increases the transfer on your website and the number of queries processed on your server. Every action that the user takes when trying out a single editor feature adds up to the number of kilobytes downloaded from your server. These are mostly actions driven by pure curiosity and without any reasonable context (oh, I wonder what this button does…).
• Is having a toolbar with more than 15 icons in several rows really necessary? Your users might be confused when they see a WYSIWYG editor with so many features available, while their job is simply to format a text paragraph or add another row to the table.
• Do care about the final aesthetics of the content created in the editor. The content should be fully compatible with the websites’ design and purpose. The last thing you want to end up with is a perfectly designed website with user-created content that is full of out-of-context formatting (various fonts in all shapes, sizes and colors etc.) and extensive amounts of rich content (videos, images, tables etc.). Give your users only the most necessary tools and functionality to create content that suits the design of your product.

Mistake #2: Installing CKEditor Full Package and expecting it to have ALL plugins that we host in the Add-Ons Repository.

The full featured CKEditor package contains 72 plugins suited for your every possible need. However, please notice that these are only the plugins created by the CKEditor core development team which have been selected to become a part of a predefined CKEditor preset. This package does not contain any 3rd party plugins, which you can still include in your custom build using CKBuilder.

Please bear in mind that all of our predefined presets contain only the essential plugins for creating basic semantic content. If you want to use any of the extended functionalities of the editor (e.g. code snippets, media embed, mathematical formulas etc.), use CKBuilder to add specific plugins and widgets to your final CKEditor build. 

Mistake #3: Installing the wrong CKEditor package and missing out on the plugins you really need.

When deciding to go for one of our predefined CKEditor packages please make sure that you are installing the one which suits your needs and has the plugins you find useful. You can always compare the list of plugins included in every package by using our comparative table. 

Mistake #4: Installing large numbers of additional 3rd party plugins without doing a preliminary check.

Before installing a plugin make sure that you really need it and that it does exactly what you want it to do. CKEditor has a plugin-based architecture, however, all of the plugins have their own dependencies. There are plugins which serve the same purpose, but deliver it in a different way and can’t work side by side. The best way to install plugins is to use CKBuilder, which will resolve all plugin dependencies for you automatically.

Please make sure that the plugin you want to install is compliant with your CKEditor version and that it is actively maintained (the author replies to user questions and fixes reported bugs). CKSource developers are not responsible for 3rd party plugins - we just maintain a platform for sharing them, but do not test 3rd party stuff nor vouch for its quality. A plugin with docs, demo, lots of active discussions and source code is usually more reliable than a plugin which has not been maintained for the last two years.

One way to make sure that you won’t commit these mistakes is...

...to use CKBuilder every time you download and install or upgrade your CKEditor. 

CKBuilder takes care of all plugin dependencies for you and creates a unique hash code within the build-config.js file that enables you to either go back to CKBuilder at any time and start customizing your editor from the current setup or instantly download the latest version of CKEditor (Optimized) with your custom setup.

Here is a quick run through the possible steps you might take when setting up your customized version of CKEditor.

1. In the “Download” section on our website choose “Or let me customize CKEditor” and click the “Customize and Download CKEditor” button.

2. Select a preset that you want to start from.

3. Add any additional plugins / widgets / skins / languages.

4. Tick off the “Terms of use” box and download the optimized package.

 

In case you want to come back and add / remove anything from your build, please look for the build-config.js file with a URL containing a unique hash number that will enable you to recreate your build instantly in CKBuilder. 

Remember that the latest version of CKEditor is the greatest one. Since the process of re-creating your custom build is a piece of cake, upgrading your CKEditor with every new release should not be a problem.

We hope that this blog posts has shed some light on your CKEditor installation/upgrade problems and that you will actively use CKBuilder which can make your CKEditor experience a whole lot better!