Contribute to this guideReport an issue

guideExample CKEditor 4 Setups

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

# Article Editor

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

Visit the ckeditor4-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 can later be exported to PDF using the official Export to PDF plugin.

Visit the ckeditor4-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 ckeditor4-docs-samples GitHub repository to learn more about 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

# Accessibility Checker

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

Visit the CKEditor Examples 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 4 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.

Although at a first glance it looks like the simplest way of adding plugins to CKEditor 4, 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 4 if additional third-party plugins are not used. Using CKEditor 4 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 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 4 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.