Intro to Customizing CKEditor 4

The arrival of CKEditor 4 introduced three important website features that affect how the editor is customized. First, CKEditor now has three main Download Packages: Basic, Standard and Full. Second, the new website has an Add-ons Repository where community-made plugins can be freely uploaded and shared. Third, complimenting the repository is a feature called CKBuilder that lets you add or remove plugins, skins and languages from the download packages. The idea was to create a lean default editor while simplify the customization process.

It appears that some members of the community are taking a bit longer to adopt the new changes, probably because they have been using the old configuration methods for so long. Simply pressing the Download button then modifying the config.js file might give undesired results, so this blog aims to clarify a few misconceptions.

Let’s go over how you can customize CKEditor 4 before even pressing the download button.

Download Packages

Manual customizing can be problematic in CKEditor 4 because the default preset (Standard) doesn’t include all available plugins. Adding code to the config.js file will not activate toolbar buttons that aren’t included in the actual package.

On the Download page you should see two red buttons. The Download CKEditor 4 button is pretty self-explanatory but one thing needs clarification: the default Standard package includes tools optimized for modern web-standards-aware content creation, not an MS Word-like toolbar.

The Standard package doesn’t include plugins like Alignment, Font Size, Color and a few other typical buttons. Why? Because modern websites predefine those things in CSS to avoid low quality content. Users should not "play around" with formatting. Web standards are increasingly more focused on the semantic information of texts. The Standard CKEditor comes with all the necessary tools to create "good web content". The idea is teaching our users about the best way for a "better web", so we made Standard the default option.

Multiple selection

Before downloading, make sure you have the right Package selected. If the three available packages aren’t enough, you can always click on the CKBuilder button and design your own CKEditor 4.

CKBuilder

The correct way to customize CKEditor’s toolbar is through CKBuilder. CKBuilder lets you select one of three presets (to get you started) from which you can remove or add plugins. Some plugins have dependencies so be mindful of the “required” notes. The right-hand menu shows which plugins are available in the Add-ons Repository, and the left-hand menu shows which ones have already been added to your CKEditor package. The arrows between both menus add and remove plugins from your package.

Multiple selection

When you are done, download your package at the bottom of the page. By default an optimized version of CKEditor that doesn’t include source files will be compiled. You can also get a Source version if you plan on debugging the editor or developing a heavily customized editor, though for development purposes we recommend checking out CKEditor on GitHub.

Add-Ons Repository

CKEditor.com has an Add-ons Repository where the community can upload and download custom plugins. Here you can see more details on each plugin. You can filter plugins by functionality using the left-hand menu. Pressing the Add to my editor button adds the selected plugins to your package. When you are ready for download, just click on Download my editor and you will be taken to CKBuilder for a final review before downloading.

Multiple selection

Alternately, you can download each plugin individually from the plugin’s official Add-ons page. To activate the plugin you will have to extract the plugin's folder to ckeditor/plugins, then add following code to your ckeditor/config.js file: config.extraPlugins = 'PLUGIN_NAME';

As you see, CKEditor was designed to be customized even before downloading, though it’s still possible to customize the old fashion way. If you have any suggestions on how this process can be improved, feel free to leave a comment below.