CKEditor 4 Documentation

Example CKEditor Setups

This article is a detailed explanation of sample editor configurations shown on the CKEditor Homepage and CKEditor Features page.

Article Editor

The Article Editor demo showcases an editor designed mainly for writing web text content like blog posts, articles etc.

Visit the ckeditor-docs-samples GitHub repository to learn more about this configuration.

The Article Editor is based on the Standard package with a few modifications:

Article Editor

Document Editor

The Document Editor demo showcases a more robust editor designed for creating documents which are usually later printed or exported to PDF files using tools like wkhtmltopdf or PhantomJS (note: PhantomJS 2.x currently has a known zoom issue).

Visit the ckeditor-docs-samples GitHub repository to learn more about this configuration.

The Document Editor is based on the Full package with a few modifications:

Document Editor

Inline Editor

The Inline Editor demo showcases inline editing that allows you to edit any element on the page in-place.

Visit the CKEditor SDK website to try out this configuration.

Inline editor provides a real WYSIWYG experience "out of the box" because unlike in classic editor, there is no <iframe> element surrounding the editing area. The CSS styles used for editor content are exactly the same as on the target page where the content is rendered.

Inline Editor

Developer Site Editor

The Developer Site Editor demo showcases a sample editor for technical websites. The most interesting features presented in this configuration are Code Snippets and Mathematical Formulas. Both plugins support independent blocks of content rendered with the help of external JavaScript libraries.

Visit the ckeditor-docs-samples GitHub repository to learn more about this configuration.

The Developer Site Editor is based on the Standard package with a few modifications:

Developer Site Editor

Drag & Drop

The Drag & Drop demo showcases possible usage of CKEditor interface for handling drag and drop operations.

Visit the CKEditor SDK website to try out this configuration.

The Drag & Drop sample allows you to drag contacts from the list on the right-hand side to the inline editor on the left-hand side. The contacts are inserted into the editor as custom widgets representing the h-card microformat.

Drag &amp; Drop

Accessibility Checker

This demo showcases the Accessibility Checker plugin — an innovative solution that lets you inspect the accessibility level of content created in CKEditor and immediately solve any accessibility issues that are found.

Visit the CKEditor SDK website to try out this configuration.

Accessibility Checker

Hints for Production Environment (All Setups)

All setups above used some additional plugins which are not included by default in the Basic, Standard or Full distributions.

There are multiple ways of loading the CKEditor library inside an application (each of them having its pros and cons) that are especially important when multiple additional plugins are loaded.

For better understanding of key differences please refer to CKEditor Best Practices and Advanced Installation Concepts.

Manual Download and Installation of Additional Plugins (Not Recommended)

Although at a first glance it looks like the simplest way of adding plugins to CKEditor, it is not only inefficient but also may result in a headache when trying to add plugin A, that requires plugin B, that requires plugin C (...and so on).

In a brief summary it involves the following steps:

  1. Downloading the predefined package (Basic/Standard/Full) from the Download page.
  2. Downloading additional plugins manually from the Add-ons Repository.
  3. Downloading plugins required by additional plugins manually.
  4. Enabling additional plugins manually through CKEDITOR.config.extraPlugins.
BenchmarkResultComments
Plugin installation complexityHigh Need to manually download all dependencies.
Toolbar configuration complexityModerateOnly after CKEDITOR.config.extraPlugins is set the toolbar configurator will render all available buttons.
Complexity of future upgradesHighNeed to manually download all plugins and dependencies again.
Number of files requested by the browserHighEach plugin results in a couple of additional HTTP requests (plugin, language file, icon).
PerformanceLowLarge number of HTTP requests.

Using CDN

This is the easiest way of using CKEditor if additional third-party plugins are not used. Using CKEditor from CDN involves the following steps:

  1. Adding a <script> tag that loads ckeditor.js from CDN. For more information refer to the CDN documentation.
  2. In case of using third-party plugins:
    1. Downloading them manually from the Add-ons Repository.
    2. Downloading plugin requirements manually.
  3. Enabling additional plugins manually through CKEDITOR.config.extraPlugins.
BenchmarkResultComments
Plugin installation complexityModerate - High Plugins authored by CKSource are available on CDN and can be easily enabled throogh CKEDITOR.config.extraPlugins. Third-party plugins need to be downloaded locally and enabled as external plugins.
Toolbar configuration complexityHighThe toolbar configurator is not available so understanding what button names to use may be challenging.
Complexity of future upgradesLow - ModerateAs easy as changing the version number in a single <script> tag. Locally stored third-party plugins must be updated manually.
Number of files requested by the browserHighEach plugin results in a couple of additional HTTP requests (plugin, language file, icon).
PerformanceModerate - HighLarger number of HTTP requests is compensated by fast network and endpoints located very close to the end user. Additional benefit caused by the fact that browsers load requests from multiple domains in parallel.

Using Builder (Recommended)

Using Builder to build a bundle with all required plugins is highly recommended in case of using customized packages, especially those with additional third-party plugins.

Refer to the Installing Plugins – Online Builder Installation article for information about building a custom editor package.

BenchmarkResultComments
Plugin installation complexityLow As simple as selecting additional plugins from the list of all available plugins.
Toolbar configuration complexityLowThe toolbar configurator is included in the downloaded CKEditor package and is aware of all included plugins.
Complexity of future upgradesLowAs easy as uploading the build-config.js file to the Online Builder and regenerating the package.
Number of files requested by the browserLowPlugins are bundled into a single ckeditor.js file. Icons are merged into a sprite. Language files are merged.
PerformanceHighThe only problem might be in slow networks where CKEditor is hosted and/or in a misconfigured server without file compression enabled. Such setup would influence not only CKEditor but would also slow down the whole web application.