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: not published yet
| Plugin | HTML output |
|---|---|
CKFinder upload adapter | None. |
Source file: not published yet
| Plugin | HTML output |
|---|---|
Alignment | <$block style="text-align:*">By default, the alignment feature uses the |
<$block class="*">If |
Source file: not published yet
| Plugin | HTML output |
|---|---|
Autoformat | None. |
Source file: not published yet
| Plugin | HTML output |
|---|---|
Autosave | None. |
Source file: not published yet
| Plugin | HTML output |
|---|---|
Bold | <strong> |
Code | <code> |
Italic | <i> |
Strikethrough | <s> |
Subscript | <sub> |
Superscript | <sup> |
Underline | <u> |
Source file: not published yet
| Plugin | HTML output |
|---|---|
Block quote | <blockquote> |
Source file: not published yet
| Plugin | HTML output |
|---|---|
Bookmark | <a id="*"> |
Source file: not published yet
| 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: not published yet
| Plugin | HTML output |
|---|---|
CKFinder | None. |
Source file: not published yet
| Plugin | HTML output |
|---|---|
Cloud Services | None. |
Source file: not published yet
| 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: not published yet
| Plugin | HTML output |
|---|---|
Easy Image | None. |
Source file: not published yet
| Plugin | HTML output |
|---|---|
Emoji | None. |
Emoji mention | None. |
Emoji picker | None. |
Source file: not published yet
| Plugin | HTML output |
|---|---|
Essentials | <br> |
Source file: not published yet
| Plugin | HTML output |
|---|---|
Find and replace | None. |
Source file: not published yet
| 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: not published yet
| Plugin | HTML output |
|---|---|
Fullscreen mode | None. |
Source file: not published yet
| 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: not published yet
| 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: not published yet
| Plugin | HTML output |
|---|---|
Horizontal line | <hr> |
Source file: not published yet
| 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: not published yet
| 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: not published yet
| 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: not published yet
| 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: not published yet
| Plugin | HTML output |
|---|---|
Text part language | <span |
Source file: not published yet
| 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: not published yet
| 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: not published yet
| Plugin | HTML output |
|---|---|
Markdown | None. |
Source file: not published yet
| 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: not published yet
| Plugin | HTML output |
|---|---|
Mention | <span |
Source file: not published yet
| Plugin | HTML output |
|---|---|
Content minimap | None. |
Source file: not published yet
| Plugin | HTML output |
|---|---|
Page break | <div |
<span style="display:*"> |
Source file: not published yet
| 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: not published yet
| Plugin | HTML output |
|---|---|
Paste from Office | None. |
Source file: not published yet
| Plugin | HTML output |
|---|---|
Remove format | None. |
Source file: not published yet
| Plugin | HTML output |
|---|---|
Restricted editing mode | <span class="restricted-editing-exception"> |
Standard editing mode | <span class="restricted-editing-exception"> |
Source file: not published yet
| Plugin | HTML output |
|---|---|
Select all | None. |
Source file: not published yet
| Plugin | HTML output |
|---|---|
Show blocks | None. |
Source file: not published yet
| Plugin | HTML output |
|---|---|
Source code editing | None. |
Source file: not published yet
| 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: not published yet
| Plugin | HTML output |
|---|---|
Style | <* class="*">The plugin can output any arbitrary HTML depending on its configuration. |
Source file: not published yet
| 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: not published yet
| Plugin | HTML output |
|---|---|
Text transformation | None. |
Source file: not published yet
| Plugin | HTML output |
|---|---|
Block toolbar | None. |
Accessibility help | None. |
Source file: not published yet
| Plugin | HTML output |
|---|---|
Undo | None. |
Source file: not published yet
| Plugin | HTML output |
|---|---|
Base64 upload adapter | None. |
Simple upload adapter | None. |
Source file: not published yet
| Plugin | HTML output |
|---|---|
Watchdog | None. |
Source file: not published yet
| 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. |