Contribute to this guideReport an issue

guideInstalling Widgets

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

# Online Builder Installation

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

# Through Online Builder

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

  • Easy Image – A plugin that lets you upload responsive and optimized captioned images delivered from a blazing-fast CDN.
  • 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. This plugin is included in Standard and Full presets since CKEditor 4.8.
  • 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 online builder

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 online builder 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 4.

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 online builder. The plugin that you have just added will be counted as “selected”.

Building a custom CKEditor version

Please note that in online builder 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 online builder 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.