Plugins in CKEditor 5
Features in CKEditor are introduced by plugins. In fact, without plugins, CKEditor 5 is an empty API with no use. Plugins provided by the CKEditor core team are available in npm (and GitHub, too) in the form of npm packages. A package may contain one or more plugins (for example, the @ckeditor/ckeditor5-image package contains several granular plugins).
Starting with CKEditor 5 v42.0.0, we collect all plugins in two aggregate packages: ckeditor5 and ckeditor5-premium-features. Using those two is the recommended way of setup. This way you get easy access to all the plugins, without the need to look which plugin is in which package.
Plugins can be pretty much anything. They are pieces of code initialized by the editor if they are configured to be loaded. They can use the richness of the CKEditor 5 Framework API to enhance the editor or to better integrate it with your application.
Common use cases for plugins are:
- Editing features, like bold, heading, linking, or any other feature that the user can use to manipulate the content.
- Adding semantic value to the content, like annotations or accessibility features.
- Third-party services integration, for injecting external resources into the content, like videos or social network posts.
- Handling image upload and image manipulation features.
- Providing widgets for easy integration with application structured data.
- Injecting analysis tools that help enhance the quality of the content.
- And other infinite possibilities.
Creating your own plugins is a straightforward task, but it requires good knowledge about some aspects of the CKEditor 5 development environment. The following resources are recommended as a starting point:
- The Plugin development guide.
- The Using package generator, that provides a plugin development environment.
A good understanding of the CKEditor 5 Framework is also welcome when it comes to creating plugins.
A great way to enhance your editor with additional features is by using plugins created by the community. Such plugins are available as npm packages, so a quick search on the “ckeditor5” keyword in npm should work as a starting point.
Once you have plugins you want to include, learn how to install them.
Listed below are all official CKEditor 5 packages as well as some partner packages together with their possible HTML output. If a plugin generates a different HTML output depending on its configuration, it is described in the “HTML output” column.
The classes, styles or attributes applied to an HTML element are all possible results. It does not mean they all will always be used.
$block is a generic structural element that may contain textual content. Features like headings or paragraph implement it to inherit common behaviors. You can read more about it in the Schema guide.
If a given plugin does not generate any output, the “HTML output” is described as “None.” Wildcard character * means any value is possible.
The data used to generate the following tables comes from the package metadata. You can read more about it in the package metadata guide.
Source file: @ckeditor/ckeditor5-adapter-ckfinder/ckeditor5-metadata.json
| Plugin | HTML output |
|---|---|
CKFinder upload adapter | None. |
Source file: @ckeditor/ckeditor5-ai/ckeditor5-metadata.json
| Plugin | HTML output |
|---|---|
AI Assistant | None. |
Source file: @ckeditor/ckeditor5-alignment/ckeditor5-metadata.json
| Plugin | HTML output |
|---|---|
Alignment | <$block style="text-align:*">By default, the alignment feature uses the |
<$block class="*">If |
Source file: @ckeditor/ckeditor5-autoformat/ckeditor5-metadata.json
| Plugin | HTML output |
|---|---|
Autoformat | None. |
Source file: @ckeditor/ckeditor5-autosave/ckeditor5-metadata.json
| Plugin | HTML output |
|---|---|
Autosave | None. |
Source file: @ckeditor/ckeditor5-basic-styles/ckeditor5-metadata.json
| Plugin | HTML output |
|---|---|
Bold | <strong> |
Code | <code> |
Italic | <i> |
Strikethrough | <s> |
Subscript | <sub> |
Superscript | <sup> |
Underline | <u> |
Source file: @ckeditor/ckeditor5-block-quote/ckeditor5-metadata.json
| Plugin | HTML output |
|---|---|
Block quote | <blockquote> |
Source file: @ckeditor/ckeditor5-bookmark/ckeditor5-metadata.json
| Plugin | HTML output |
|---|---|
Bookmark | <a id="*"> |
Source file: @ckeditor/ckeditor5-case-change/ckeditor5-metadata.json
| Plugin | HTML output |
|---|---|
Case change | None. |
Source file: @ckeditor/ckeditor5-ckbox/ckeditor5-metadata.json
| Plugin | HTML output |
|---|---|
CKBox | <a data-ckbox-resource-id="*"><figure data-ckbox-resource-id="*"><img data-ckbox-resource-id="*">If |
CKBox Image Edit | None. |
Source file: @ckeditor/ckeditor5-ckfinder/ckeditor5-metadata.json
| Plugin | HTML output |
|---|---|
CKFinder | None. |
Source file: @ckeditor/ckeditor5-cloud-services/ckeditor5-metadata.json
| Plugin | HTML output |
|---|---|
Cloud Services | None. |
Source file: @ckeditor/ckeditor5-code-block/ckeditor5-metadata.json
| Plugin | HTML output |
|---|---|
Code blocks | <pre> |
<code class="language-*">By default, the language of the code block is represented as a CSS class prefixed by | |
<code class="*">The CSS class name can be customized via the |
Source file: @ckeditor/ckeditor5-comments/ckeditor5-metadata.json
| Plugin | HTML output |
|---|---|
Comments | <comment |
<comment-end name="*"><comment-start name="*"> | |
<*The plugin adds the |
Source file: @ckeditor/ckeditor5-document-outline/ckeditor5-metadata.json
| Plugin | HTML output |
|---|---|
Document outline | None. |
Table of contents | <div class="table-of-contents table-of-contents_empty"> |
<ol><li><a> | |
<p class="table-of-contents__placeholder"> |
Source file: @ckeditor/ckeditor5-easy-image/ckeditor5-metadata.json
| Plugin | HTML output |
|---|---|
Easy Image | None. |
Source file: @ckeditor/ckeditor5-email/ckeditor5-metadata.json
| Plugin | HTML output |
|---|---|
EmailConfigurationHelper | None. |
Source file: @ckeditor/ckeditor5-emoji/ckeditor5-metadata.json
| Plugin | HTML output |
|---|---|
Emoji | None. |
Emoji mention | None. |
Emoji picker | None. |
Source file: @ckeditor/ckeditor5-essentials/ckeditor5-metadata.json
| Plugin | HTML output |
|---|---|
Essentials | <br> |
Source file: @ckeditor/ckeditor5-export-inline-styles/ckeditor5-metadata.json
| Plugin | HTML output |
|---|---|
Export with Inline Styles | None. |
Source file: @ckeditor/ckeditor5-export-pdf/ckeditor5-metadata.json
| Plugin | HTML output |
|---|---|
Export to PDF | None. |
Source file: @ckeditor/ckeditor5-export-word/ckeditor5-metadata.json
| Plugin | HTML output |
|---|---|
Export to Word | None. |
Source file: @ckeditor/ckeditor5-find-and-replace/ckeditor5-metadata.json
| Plugin | HTML output |
|---|---|
Find and replace | None. |
Source file: @ckeditor/ckeditor5-font/ckeditor5-metadata.json
| Plugin | HTML output |
|---|---|
Font background color | <span style="background-color:*"> |
Font color | <span style="color:*"> |
Font size | <span class="text-tiny text-small text-big text-huge">If the |
<span style="font-size:*">If the | |
<*The plugin can be configured to return any element with any classes and any inline styles. | |
Font family | <span style="font-family:*">By default, the font family feature uses the |
<*The plugin can be configured to return any element with any classes and any inline styles. |
Source file: @ckeditor/ckeditor5-format-painter/ckeditor5-metadata.json
| Plugin | HTML output |
|---|---|
Format painter | None. |
Source file: @ckeditor/ckeditor5-fullscreen/ckeditor5-metadata.json
| Plugin | HTML output |
|---|---|
Fullscreen mode | None. |
Source file: @ckeditor/ckeditor5-heading/ckeditor5-metadata.json
| Plugin | HTML output |
|---|---|
Title | <h1> |
Heading | <h2><h3><h4>
HTML element may contain classes, styles or attributes, that are created by other plugins, which alter the This element inherits all attributes, classes and styles that are allowed on the |
<*>The plugin can be configured to return any element name as a heading. |
Source file: @ckeditor/ckeditor5-highlight/ckeditor5-metadata.json
| Plugin | HTML output |
|---|---|
Highlight | <mark class="marker-yellow marker-green marker-pink marker-blue pen-red pen-green">By default, this plugin has 4 markers and 2 pens preconfigured. |
<mark class="*">The plugin can be configured to set any classes on the |
Source file: @ckeditor/ckeditor5-horizontal-line/ckeditor5-metadata.json
| Plugin | HTML output |
|---|---|
Horizontal line | <hr> |
Source file: @ckeditor/ckeditor5-html-embed/ckeditor5-metadata.json
| Plugin | HTML output |
|---|---|
HTML embed | <div class="raw-html-embed"> |
<*The plugin can output any arbitrary HTML provided by the user. That HTML is always wrapped with a |
Source file: @ckeditor/ckeditor5-html-support/ckeditor5-metadata.json
| Plugin | HTML output |
|---|---|
General HTML Support | <*The plugin can output any arbitrary HTML configured by config.htmlSupport option. |
Data filter | <*The plugin can output any arbitrary HTML depending on its configuration. |
Data schema | None. |
Empty block | None. |
HTML comment | The plugin can output HTML comments that were added from the editor inital data or by the plugin API. |
Full page HTML | None. |
Source file: @ckeditor/ckeditor5-image/ckeditor5-metadata.json
| Plugin | HTML output |
|---|---|
Auto image | None. |
Block image | <figure class="image"> |
<img | |
Inline image | <img |
Image | None. |
Image caption | <figcaption> |
Image resize | <figure |
<img | |
Image style | <figure class="image-style-side image-style-align-left image-style-align-right image-style-block-align-center image-style-block-align-left image-style-block-align-right"> |
<figure class="*">The plugin can be configured to set any class names on the | |
Image toolbar | None. |
Image upload | None. |
Image insert | None. |
Image insert via URL | None. |
Image utils | None. |
Image editing | None. |
Source file: @ckeditor/ckeditor5-import-word/ckeditor5-metadata.json
| Plugin | HTML output |
|---|---|
Import from Word | None. |
Source file: @ckeditor/ckeditor5-indent/ckeditor5-metadata.json
| Plugin | HTML output |
|---|---|
Indent | None. |
Indent block | <$block style="margin-left:*; margin-right:*">By default, the plugin uses inline styles for indentation. |
<$block class="*">If classes are defined in |
Source file: @ckeditor/ckeditor5-language/ckeditor5-metadata.json
| Plugin | HTML output |
|---|---|
Text part language | <span |
Source file: @ckeditor/ckeditor5-line-height/ckeditor5-metadata.json
| Plugin | HTML output |
|---|---|
Line height | None. |
Source file: @ckeditor/ckeditor5-link/ckeditor5-metadata.json
| Plugin | HTML output |
|---|---|
Autolink | None. |
Link | <a href="*"> |
<aIf | |
<aThe plugin can be configured to set any classes, styles or attributes on the | |
Link image | <a href="*"> |
Source file: @ckeditor/ckeditor5-list/ckeditor5-metadata.json
| Plugin | HTML output |
|---|---|
Legacy list | <ol><ul> |
<li>
HTML element may contain classes, styles or attributes, that are created by other plugins, which alter the | |
Legacy to-do list | <ul class="todo-list"> |
<li> | |
<label class="todo-list__label"> | |
<span class="todo-list__label__description"> | |
<input | |
Legacy list properties | <ol<ul |
List | <ol><ul> |
<li> | |
List formatting | None. |
List item bold integration | <li class="ck-list-marker-bold"> |
List item italic integration | <li class="ck-list-marker-italic"> |
List item font size integration | <li |
List item font color integration | <li |
List item font family integration | <li |
To-do list | <ul class="todo-list"> |
<li> | |
<label class="todo-list__label todo-list__label_without-description"> | |
<span class="todo-list__label__description"> | |
<input | |
List properties | <ol<ul |
Source file: @ckeditor/ckeditor5-list-multi-level/ckeditor5-metadata.json
| Plugin | HTML output |
|---|---|
Multi-level list | <ol<ul |
<li> | |
<span class="multi-level-list__marker"> |
Source file: @ckeditor/ckeditor5-markdown-gfm/ckeditor5-metadata.json
| Plugin | HTML output |
|---|---|
Markdown | None. |
Source file: @ckeditor/ckeditor5-media-embed/ckeditor5-metadata.json
| Plugin | HTML output |
|---|---|
Media embed | <figure class="media"> |
<oembed url="*">If | |
<div data-oembed-url="*">If | |
<* url="*">If | |
<div style="height:*; padding-bottom:*; position:*">If | |
<iframeIf | |
<*The plugin can be configured to return any element with any class, inline style, and attribute, via | |
Media embed toolbar | None. |
Source file: @ckeditor/ckeditor5-mention/ckeditor5-metadata.json
| Plugin | HTML output |
|---|---|
Mention | <span |
Source file: @ckeditor/ckeditor5-merge-fields/ckeditor5-metadata.json
| Plugin | HTML output |
|---|---|
Merge fields | None. |
Source file: @ckeditor/ckeditor5-minimap/ckeditor5-metadata.json
| Plugin | HTML output |
|---|---|
Content minimap | None. |
Source file: @ckeditor/ckeditor5-page-break/ckeditor5-metadata.json
| Plugin | HTML output |
|---|---|
Page break | <div |
<span style="display:*"> |
Source file: @ckeditor/ckeditor5-pagination/ckeditor5-metadata.json
| Plugin | HTML output |
|---|---|
Pagination | <*When using |
Source file: @ckeditor/ckeditor5-paragraph/ckeditor5-metadata.json
| Plugin | HTML output |
|---|---|
Paragraph | <p>
HTML element may contain classes, styles or attributes, that are created by other plugins, which alter the This element inherits all attributes, classes and styles that are allowed on the |
Source file: @ckeditor/ckeditor5-paste-from-office/ckeditor5-metadata.json
| Plugin | HTML output |
|---|---|
Paste from Office | None. |
Source file: @ckeditor/ckeditor5-paste-from-office-enhanced/ckeditor5-metadata.json
| Plugin | HTML output |
|---|---|
Paste from Office Enhanced | None. |
Source file: @ckeditor/ckeditor5-real-time-collaboration/ckeditor5-metadata.json
| Plugin | HTML output |
|---|---|
Presence list | None. |
Real-time collaborative comments | None. |
Real-time collaborative editing | None. |
Real-time collaborative track changes | None. |
Real-time collaborative revision history | None. |
Source file: @ckeditor/ckeditor5-remove-format/ckeditor5-metadata.json
| Plugin | HTML output |
|---|---|
Remove format | None. |
Source file: @ckeditor/ckeditor5-restricted-editing/ckeditor5-metadata.json
| Plugin | HTML output |
|---|---|
Restricted editing mode | <span class="restricted-editing-exception"> |
Standard editing mode | <span class="restricted-editing-exception"> |
Source file: @ckeditor/ckeditor5-revision-history/ckeditor5-metadata.json
| Plugin | HTML output |
|---|---|
Revision History | None. |
Source file: @ckeditor/ckeditor5-select-all/ckeditor5-metadata.json
| Plugin | HTML output |
|---|---|
Select all | None. |
Source file: @ckeditor/ckeditor5-show-blocks/ckeditor5-metadata.json
| Plugin | HTML output |
|---|---|
Show blocks | None. |
Source file: @ckeditor/ckeditor5-slash-command/ckeditor5-metadata.json
| Plugin | HTML output |
|---|---|
Slash command | None. |
Source file: @ckeditor/ckeditor5-source-editing/ckeditor5-metadata.json
| Plugin | HTML output |
|---|---|
Source code editing | None. |
Source file: @ckeditor/ckeditor5-source-editing-enhanced/ckeditor5-metadata.json
| Plugin | HTML output |
|---|---|
Source editing enhanced | None. |
Source file: @ckeditor/ckeditor5-special-characters/ckeditor5-metadata.json
| Plugin | HTML output |
|---|---|
Special characters | None. |
Special characters essentials | None. |
Special characters arrows | None. |
Special characters currency | None. |
Special characters latin | None. |
Special characters mathematical | None. |
Special characters text | None. |
Source file: @ckeditor/ckeditor5-style/ckeditor5-metadata.json
| Plugin | HTML output |
|---|---|
Style | <* class="*">The plugin can output any arbitrary HTML depending on its configuration. |
Source file: @ckeditor/ckeditor5-table/ckeditor5-metadata.json
| Plugin | HTML output |
|---|---|
Table | <figure class="table"> |
<table><thead><tbody><tr> | |
<td<th | |
Table cell properties | <td style="background-color:*; border:*; border-*:*; height:*; padding:*; text-align:*; vertical-align:*; width:*"><th style="background-color:*; border:*; border-*:*; height:*; padding:*; text-align:*; vertical-align:*; width:*"> |
Table properties | <figure style="float:*; height:*; width:*"> |
<table style="background-color:*; border:*; border-*:*"> | |
Table layout | |
Table toolbar | None. |
Table caption | <figcaption data-placeholder="*"> |
Table column resize | <colgroup> |
<col style="width:*"> | |
PlainTableOutput | <table><thead><tbody><tr> |
<td<th |
Source file: @ckeditor/ckeditor5-template/ckeditor5-metadata.json
| Plugin | HTML output |
|---|---|
Template | None. |
Source file: @ckeditor/ckeditor5-track-changes/ckeditor5-metadata.json
| Plugin | HTML output |
|---|---|
Track changes | None. |
Track changes data | None. |
Track changes preview | None. |
Source file: @ckeditor/ckeditor5-typing/ckeditor5-metadata.json
| Plugin | HTML output |
|---|---|
Text transformation | None. |
Source file: @ckeditor/ckeditor5-ui/ckeditor5-metadata.json
| Plugin | HTML output |
|---|---|
Block toolbar | None. |
Accessibility help | None. |
Source file: @ckeditor/ckeditor5-undo/ckeditor5-metadata.json
| Plugin | HTML output |
|---|---|
Undo | None. |
Source file: @ckeditor/ckeditor5-upload/ckeditor5-metadata.json
| Plugin | HTML output |
|---|---|
Base64 upload adapter | None. |
Simple upload adapter | None. |
Source file: @ckeditor/ckeditor5-uploadcare/ckeditor5-metadata.json
| Plugin | HTML output |
|---|---|
Uploadcare | <a data-uploadcare-resource-id="*"><figure data-uploadcare-resource-id="*"><img data-uploadcare-resource-id="*"> |
Uploadcare Image Edit | None. |
Source file: @ckeditor/ckeditor5-watchdog/ckeditor5-metadata.json
| Plugin | HTML output |
|---|---|
Watchdog | None. |
Source file: @ckeditor/ckeditor5-word-count/ckeditor5-metadata.json
| Plugin | HTML output |
|---|---|
Word count | None. |
Source file: not published yet
| Plugin | HTML output |
|---|---|
MathType | <* *="*">For a complete list of available MathML element and attribute names, visit MDN Web Docs for MathML. |
Source file: not published yet
| Plugin | HTML output |
|---|---|
WProofreader | None. |