CKEditor 4 Documentation

Installing Widgets

This feature was introduced in CKEditor 4.3. It is provided through optional plugins that are not included in the CKEditor presets available from the Download site and need to be added to your custom build with CKBuilder.

Online Builder Installation

All widget plugins are optional. If you want to add them to your CKEditor 4.3+ build, you can do it in two ways.

Through CKBuilder

The easiest method is to visit the CKBuilder page and find the widget plugins in the Available Plugins list on the right. The following widgets were introduced in CKEditor 4.3 and above:

  • Enhanced Image – A plugin that lets you add captioned images with "click and drag" resizing.
  • Mathematical Formulas – A plugin that lets you add mathematical formulas written in TeX.
  • Placeholder – A plugin that lets you create non-editable text fragments.
  • Code Snippet – A plugin that lets you insert rich code snippets with syntax highlighting into editor content.
  • Code Snippet GeSHi – A plugin that lets you insert rich code snippets with GeSHi syntax highlighting engine integrated.
  • Media Embed – A plugin that lets you embed media resources (videos, images, tweets, etc.) hosted by other services directly in the editor.
  • Semantic Media Embed – A plugin that lets you embed media resources with semantic output (videos, images, tweets, etc.) hosted by other services directly in the editor.
  • Upload Image – A plugin that enables support for uploading images that were dropped or pasted into the editor.
  • Upload Widget – A plugin that implements a base class for creating non-blocking, live upload of files while the user is editing content.

Selected Plugins and Available Plugins lists in CKBuilder

Drag the widget plugin that you want to add to the Selected Plugins list on the left. All plugin dependencies will be resolved automatically for you and the required plugins will be added by the builder. When you are happy with your configuration, click the Download button at the bottom of the CKBuilder page to download your custom build with widget plugins included.

When you install your custom build, you will see that the additional widget plugins (in this example: Mathematical Formulas) are available in your CKEditor.

A custom CKEditor build with the Mathematical Formulas widget

Through Add-on Repository

Visit the widget plugin page in the Add-ons Repository and click the "Add to my editor" button.

Adding a widget plugin to the editor build

When you are ready, click the "Build my editor" button on the right to go to CKBuilder. The plugin that you have just added will be counted as "selected".

Building a custom CKEditor version

Please note that in CKBuilder all plugin dependencies will be resolved automatically for you. You can fine-tune your build and when you are happy with your configuration, click the Download button at the bottom of the CKBuilder page to download your custom build with widget plugins included.

Manual Installation

Last but not least, you can add widget plugins manually by downloading the .zip packages, adding them to an existing CKEditor 4.3+ installation, and modifying the editor configuration manually. This is not a recommended solution, though, and should only be used by experienced CKEditor developers. Be mindful of widget dependencies!

To avoid the manual installation process submit your widget plugins to the Add-ons Repository and encourage third-party developers to do so. In this way you will be able to both give something to the community and get valuable feedback on your work.