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.

# Common use cases

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 plugins

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.

# Using third-party 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.

# Plugins and HTML output

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.

ckeditor5-adapter-ckfinder

Source file: @ckeditor/ckeditor5-adapter-ckfinder/ckeditor5-metadata.json

Plugin	HTML output
CKFinder upload adapter Feature guide API documentation	None.

ckeditor5-ai

Source file: @ckeditor/ckeditor5-ai/ckeditor5-metadata.json

Plugin	HTML output
AI Assistant Feature guide API documentation	None.

ckeditor5-alignment

Source file: @ckeditor/ckeditor5-alignment/ckeditor5-metadata.json

Plugin	HTML output
Alignment Feature guide API documentation	<$block style="text-align:*"> By default, the alignment feature uses the text-align inline style.
	<$block class="*"> If config.alignment.options is set, these classes are used for alignment instead of inline styles.

ckeditor5-autoformat

Source file: @ckeditor/ckeditor5-autoformat/ckeditor5-metadata.json

Plugin	HTML output
Autoformat Feature guide API documentation	None.

ckeditor5-autosave

Source file: @ckeditor/ckeditor5-autosave/ckeditor5-metadata.json

Plugin	HTML output
Autosave Feature guide API documentation	None.

ckeditor5-basic-styles

Source file: @ckeditor/ckeditor5-basic-styles/ckeditor5-metadata.json

Plugin	HTML output
Bold Feature guide API documentation	<strong>
Code Feature guide API documentation	<code>
Italic Feature guide API documentation	<i>
Strikethrough Feature guide API documentation	<s>
Subscript Feature guide API documentation	<sub>
Superscript Feature guide API documentation	<sup>
Underline Feature guide API documentation	<u>

ckeditor5-block-quote

Source file: @ckeditor/ckeditor5-block-quote/ckeditor5-metadata.json

Plugin	HTML output
Block quote Feature guide API documentation	<blockquote>

ckeditor5-case-change

Source file: @ckeditor/ckeditor5-case-change/ckeditor5-metadata.json

Plugin	HTML output
Case change Feature guide API documentation	None.

ckeditor5-ckbox

Source file: @ckeditor/ckeditor5-ckbox/ckeditor5-metadata.json

Plugin	HTML output
CKBox Feature guide API documentation	<a data-ckbox-resource-id="*"><figure data-ckbox-resource-id="*"><img data-ckbox-resource-id="*"> If config.ckbox.ignoreDataId is set to false (off), the asset ID as the data-ckbox-resource-id attribute is added on the inserted elements (by default).
CKBox Image Edit Feature guide API documentation	None.

ckeditor5-ckfinder

Source file: @ckeditor/ckeditor5-ckfinder/ckeditor5-metadata.json

Plugin	HTML output
CKFinder Feature guide API documentation	None.

ckeditor5-cloud-services

Source file: @ckeditor/ckeditor5-cloud-services/ckeditor5-metadata.json

Plugin	HTML output
Cloud Services Feature guide API documentation	None.

ckeditor5-code-block

Source file: @ckeditor/ckeditor5-code-block/ckeditor5-metadata.json

Plugin	HTML output
Code blocks Feature guide API documentation	<pre>
	<code class="language-*"> By default, the language of the code block is represented as a CSS class prefixed by language-
	<code class="*"> The CSS class name can be customized via the config.codeBlock.languages array.

ckeditor5-comments

Source file: @ckeditor/ckeditor5-comments/ckeditor5-metadata.json

Plugin	HTML output
Comments Feature guide API documentation	<comment id="*" type="*" >
	<comment-end name="*"><comment-start name="*">
	<* data-comment-end-after="*" data-comment-start-before="*" > The plugin adds the data-comment-end-after and data-comment-start-before attributes to other elements on which the comment starts or ends.

ckeditor5-document-outline

Source file: @ckeditor/ckeditor5-document-outline/ckeditor5-metadata.json

Plugin	HTML output
Document outline Feature guide API documentation	None.
Table of contents Feature guide API documentation	<div class="table-of-contents table-of-contents_empty">
	<ol><li><a>
	<p class="table-of-contents__placeholder">

ckeditor5-easy-image

Source file: @ckeditor/ckeditor5-easy-image/ckeditor5-metadata.json

Plugin	HTML output
Easy Image Feature guide API documentation	None.

ckeditor5-essentials

Source file: @ckeditor/ckeditor5-essentials/ckeditor5-metadata.json

Plugin	HTML output
Essentials API documentation	<br>

ckeditor5-export-pdf

Source file: @ckeditor/ckeditor5-export-pdf/ckeditor5-metadata.json

Plugin	HTML output
Export to PDF Feature guide API documentation	None.

ckeditor5-export-word

Source file: @ckeditor/ckeditor5-export-word/ckeditor5-metadata.json

Plugin	HTML output
Export to Word Feature guide API documentation	None.

ckeditor5-find-and-replace

Source file: @ckeditor/ckeditor5-find-and-replace/ckeditor5-metadata.json

Plugin	HTML output
Find and replace Feature guide API documentation	None.

ckeditor5-font

Source file: @ckeditor/ckeditor5-font/ckeditor5-metadata.json

Plugin	HTML output
Font background color Feature guide API documentation	<span style="background-color:*">
Font color Feature guide API documentation	<span style="color:*">
Font size Feature guide API documentation	<span class="text-tiny text-small text-big text-huge"> If the config.fontSize.options option is not set or it contains predefined named presets, the feature uses class names.
	<span style="font-size:*"> If the config.fontSize.options option contains numerical values, the font size feature uses the font-size inline style.
	<* class="*" style="*:*" > The plugin can be configured to return any element with any classes and any inline styles.
Font family Feature guide API documentation	<span style="font-family:*"> By default, the font family feature uses the font-family inline style.
	<* class="*" style="*:*" > The plugin can be configured to return any element with any classes and any inline styles.

ckeditor5-format-painter

Source file: @ckeditor/ckeditor5-format-painter/ckeditor5-metadata.json

Plugin	HTML output
Format painter Feature guide API documentation	None.

ckeditor5-heading

Source file: @ckeditor/ckeditor5-heading/ckeditor5-metadata.json

Plugin	HTML output
Title Feature guide API documentation	<h1>
Heading Feature guide API documentation	<h2><h3><h4> HTML element may contain classes, styles or attributes, that are created by other plugins, which alter the <$block> element. This element inherits all attributes, classes and styles that are allowed on the <$block> element by other features.
	<*> The plugin can be configured to return any element name as a heading.

ckeditor5-highlight

Source file: @ckeditor/ckeditor5-highlight/ckeditor5-metadata.json

Plugin	HTML output
Highlight Feature guide API documentation	<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 <mark> element.

ckeditor5-horizontal-line

Source file: @ckeditor/ckeditor5-horizontal-line/ckeditor5-metadata.json

Plugin	HTML output
Horizontal line Feature guide API documentation	<hr>

ckeditor5-html-embed

Source file: @ckeditor/ckeditor5-html-embed/ckeditor5-metadata.json

Plugin	HTML output
HTML embed Feature guide API documentation	<div class="raw-html-embed">
	<* class="*" style="*:*" > The plugin can output any arbitrary HTML provided by the user. That HTML is always wrapped with a <div class="raw-html-embed"> element.

ckeditor5-html-support

Source file: @ckeditor/ckeditor5-html-support/ckeditor5-metadata.json

Plugin	HTML output
General HTML Support Feature guide API documentation	<* class="*" style="*:*" *="*" > The plugin can output any arbitrary HTML configured by config.htmlSupport option.
Data filter API documentation	<* class="*" style="*:*" *="*" > The plugin can output any arbitrary HTML depending on its configuration.
Data schema API documentation	None.
HTML comment Feature guide API documentation	The plugin can output HTML comments that were added from the editor inital data or by the plugin API.
Full page HTML Feature guide API documentation	None.

ckeditor5-image

Source file: @ckeditor/ckeditor5-image/ckeditor5-metadata.json

Plugin	HTML output
Auto image Feature guide API documentation	None.
Block image Feature guide API documentation	<figure class="image">
	<img alt="*" height="*" sizes="*" src="*" srcset="*" width="*" >
Inline image Feature guide API documentation	<img alt="*" height="*" sizes="*" src="*" srcset="*" width="*" >
Image Feature guide API documentation	None.
Image caption Feature guide API documentation	<figcaption>
Image resize Feature guide API documentation	<figure class="image_resized" style="height:*; width:*" >
	<img class="image_resized" style="aspect-ratio:*; height:*; width:*" >
Image style Feature guide API documentation	<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 <figure> element.
Image toolbar Feature guide API documentation	None.
Image upload Feature guide API documentation	None.
Image insert Feature guide API documentation	None.
Image insert via URL Feature guide API documentation	None.

ckeditor5-import-word

Source file: @ckeditor/ckeditor5-import-word/ckeditor5-metadata.json

Plugin	HTML output
Import from Word Feature guide API documentation	None.

ckeditor5-indent

Source file: @ckeditor/ckeditor5-indent/ckeditor5-metadata.json

Plugin	HTML output
Indent Feature guide API documentation	None.
Indent block Feature guide API documentation	<$block style="margin-left:*; margin-right:*"> By default, the plugin uses inline styles for indentation.
	<$block class="*"> If classes are defined in config.indentBlock.classes, they are used instead of inline styles.

ckeditor5-language

Source file: @ckeditor/ckeditor5-language/ckeditor5-metadata.json

Plugin	HTML output
Text part language Feature guide API documentation	<span dir="*" lang="*" >

ckeditor5-link

Source file: @ckeditor/ckeditor5-link/ckeditor5-metadata.json

Plugin	HTML output
Autolink Feature guide API documentation	None.
Link Feature guide API documentation	<a href="*">
	<a rel="*" target="*" > If config.link.addTargetToExternalLinks is enabled, then the external links are decorated with rel and target attributes.
	<a class="*" style="*:*" *="*" > The plugin can be configured to set any classes, styles or attributes on the <a> tag via custom config.link.decorators configuration.
Link image Feature guide API documentation	<a href="*">

ckeditor5-list

Source file: @ckeditor/ckeditor5-list/ckeditor5-metadata.json

Plugin	HTML output
Legacy list Feature guide API documentation	<ol><ul>
	<li> HTML element may contain classes, styles or attributes, that are created by other plugins, which alter the <$block> element.
Legacy to-do list Feature guide API documentation	<ul class="todo-list">
	<li>
	<label class="todo-list__label">
	<span class="todo-list__label__description">
	<input checked="*" disabled="*" type="*" >
Legacy list properties Feature guide API documentation	<ol style="list-style-type:*" start="*" reversed="*" ><ul style="list-style-type:*" start="*" reversed="*" >
List Feature guide API documentation	<ol><ul>
	<li>
To-do list Feature guide API documentation	<ul class="todo-list">
	<li>
	<label class="todo-list__label todo-list__label_without-description">
	<span class="todo-list__label__description">
	<input checked="*" disabled="*" type="*" >
List properties Feature guide API documentation	<ol style="list-style-type:*" start="*" reversed="*" type="*" ><ul style="list-style-type:*" start="*" reversed="*" type="*" >

ckeditor5-list-multi-level

Source file: @ckeditor/ckeditor5-list-multi-level/ckeditor5-metadata.json

Plugin	HTML output
Multi-level list Feature guide API documentation	<ol class="multi-level-list legal-list" style="list-style-type:*" start="*" ><ul class="multi-level-list legal-list" style="list-style-type:*" start="*" >
	<li>
	<span class="multi-level-list__marker">

ckeditor5-markdown-gfm

Source file: @ckeditor/ckeditor5-markdown-gfm/ckeditor5-metadata.json

Plugin	HTML output
Markdown Feature guide API documentation	None.

ckeditor5-media-embed

Source file: @ckeditor/ckeditor5-media-embed/ckeditor5-metadata.json

Plugin	HTML output
Media embed Feature guide API documentation	<figure class="media">
	<oembed url="*"> If config.mediaEmbed.previewsInData is turned off, the media preview is not displayed and the media is represented using only the <oembed> tag (by default).
	<div data-oembed-url="*"> If config.mediaEmbed.previewsInData is turned on, the media preview is displayed in the view.
	<* url="*"> If config.mediaEmbed.previewsInData is turned off, the plugin can be configured to return any element name specified by config.mediaEmbed.elementName.
	<div style="height:*; padding-bottom:*; position:*"> If config.mediaEmbed.previewsInData is turned on, the media preview is displayed in the view.
	<iframe style="height:*; left:*; position:*; top:*; width:*" *allow*="*" frameborder="*" src="*" > If config.mediaEmbed.previewsInData is turned on, the media preview is displayed in the view.
	<* class="*" style="*:*" *="*" > The plugin can be configured to return any element with any class, inline style, and attribute, via config.mediaEmbed.providers for previewable media.
Media embed toolbar Feature guide API documentation	None.

ckeditor5-mention

Source file: @ckeditor/ckeditor5-mention/ckeditor5-metadata.json

Plugin	HTML output
Mention Feature guide API documentation	<span class="mention" data-mention="*" >

ckeditor5-merge-fields

Source file: @ckeditor/ckeditor5-merge-fields/ckeditor5-metadata.json

Plugin	HTML output
Merge fields Feature guide API documentation	None.

ckeditor5-minimap

Source file: @ckeditor/ckeditor5-minimap/ckeditor5-metadata.json

Plugin	HTML output
Content minimap Feature guide API documentation	None.

ckeditor5-page-break

Source file: @ckeditor/ckeditor5-page-break/ckeditor5-metadata.json

Plugin	HTML output
Page break Feature guide API documentation	<div class="page-break" style="page-break-after:*" >
	<span style="display:*">

ckeditor5-pagination

Source file: @ckeditor/ckeditor5-pagination/ckeditor5-metadata.json

Plugin	HTML output
Pagination Feature guide API documentation	<* style="page-break-before:*" data-pagination-page="*" > When using editor.getData( { pagination: true } ). Otherwise, no additional elements are generated.

ckeditor5-paragraph

Source file: @ckeditor/ckeditor5-paragraph/ckeditor5-metadata.json

Plugin	HTML output
Paragraph API documentation	<p> HTML element may contain classes, styles or attributes, that are created by other plugins, which alter the <$block> element. This element inherits all attributes, classes and styles that are allowed on the <$block> element by other features.

ckeditor5-paste-from-office

Source file: @ckeditor/ckeditor5-paste-from-office/ckeditor5-metadata.json

Plugin	HTML output
Paste from Office Feature guide API documentation	None.

ckeditor5-paste-from-office-enhanced

Source file: @ckeditor/ckeditor5-paste-from-office-enhanced/ckeditor5-metadata.json

Plugin	HTML output
Paste from Office Enhanced Feature guide API documentation	None.

ckeditor5-real-time-collaboration

Source file: @ckeditor/ckeditor5-real-time-collaboration/ckeditor5-metadata.json

Plugin	HTML output
Presence list Feature guide API documentation	None.
Real-time collaborative comments Feature guide API documentation	None.
Real-time collaborative editing Feature guide API documentation	None.
Real-time collaborative track changes Feature guide API documentation	None.
Real-time collaborative revision history Feature guide API documentation	None.

ckeditor5-remove-format

Source file: @ckeditor/ckeditor5-remove-format/ckeditor5-metadata.json

Plugin	HTML output
Remove format Feature guide API documentation	None.

ckeditor5-restricted-editing

Source file: @ckeditor/ckeditor5-restricted-editing/ckeditor5-metadata.json

Plugin	HTML output
Restricted editing mode Feature guide API documentation	<span class="restricted-editing-exception">
Standard editing mode Feature guide API documentation	<span class="restricted-editing-exception">

ckeditor5-revision-history

Source file: @ckeditor/ckeditor5-revision-history/ckeditor5-metadata.json

Plugin	HTML output
Revision History Feature guide API documentation	None.

ckeditor5-select-all

Source file: @ckeditor/ckeditor5-select-all/ckeditor5-metadata.json

Plugin	HTML output
Select all Feature guide API documentation	None.

ckeditor5-show-blocks

Source file: @ckeditor/ckeditor5-show-blocks/ckeditor5-metadata.json

Plugin	HTML output
Show blocks Feature guide API documentation	None.

ckeditor5-slash-command

Source file: @ckeditor/ckeditor5-slash-command/ckeditor5-metadata.json

Plugin	HTML output
Slash command Feature guide API documentation	None.

ckeditor5-source-editing

Source file: @ckeditor/ckeditor5-source-editing/ckeditor5-metadata.json

Plugin	HTML output
Source editing Feature guide API documentation	None.

ckeditor5-special-characters

Source file: @ckeditor/ckeditor5-special-characters/ckeditor5-metadata.json

Plugin	HTML output
Special characters Feature guide API documentation	None.
Special characters essentials Feature guide API documentation	None.
Special characters arrows Feature guide API documentation	None.
Special characters currency Feature guide API documentation	None.
Special characters latin Feature guide API documentation	None.
Special characters mathematical Feature guide API documentation	None.
Special characters text Feature guide API documentation	None.

ckeditor5-style

Source file: @ckeditor/ckeditor5-style/ckeditor5-metadata.json

Plugin	HTML output
Style Feature guide API documentation	<* class="*"> The plugin can output any arbitrary HTML depending on its configuration.

ckeditor5-table

Source file: @ckeditor/ckeditor5-table/ckeditor5-metadata.json

Plugin	HTML output
Table Feature guide API documentation	<figure class="table">
	<table><thead><tbody><tr>
	<td colspan="*" rowspan="*" ><th colspan="*" rowspan="*" >
Table cell properties Feature guide API documentation	<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 Feature guide API documentation	<figure style="float:*; height:*; width:*">
	<table style="background-color:*; border:*; border-*:*">
Table toolbar Feature guide API documentation	None.
Table caption Feature guide API documentation	<figcaption data-placeholder="*">
Table column resize Feature guide API documentation	<colgroup>
	<col style="width:*">

ckeditor5-template

Source file: @ckeditor/ckeditor5-template/ckeditor5-metadata.json

Plugin	HTML output
Template Feature guide API documentation	None.

ckeditor5-track-changes

Source file: @ckeditor/ckeditor5-track-changes/ckeditor5-metadata.json

Plugin	HTML output
Track changes Feature guide API documentation	None.
Track changes data Feature guide API documentation	None.

ckeditor5-typing

Source file: @ckeditor/ckeditor5-typing/ckeditor5-metadata.json

Plugin	HTML output
Text transformation Feature guide API documentation	None.

ckeditor5-ui

Source file: @ckeditor/ckeditor5-ui/ckeditor5-metadata.json

Plugin	HTML output
Block toolbar Feature guide API documentation	None.
Accessibility help Feature guide API documentation	None.

ckeditor5-undo

Source file: @ckeditor/ckeditor5-undo/ckeditor5-metadata.json

Plugin	HTML output
Undo Feature guide API documentation	None.

ckeditor5-upload

Source file: @ckeditor/ckeditor5-upload/ckeditor5-metadata.json

Plugin	HTML output
Base64 upload adapter Feature guide API documentation	None.
Simple upload adapter Feature guide API documentation	None.

ckeditor5-watchdog

Source file: @ckeditor/ckeditor5-watchdog/ckeditor5-metadata.json

Plugin	HTML output
Watchdog Feature guide API documentation	None.

ckeditor5-word-count

Source file: @ckeditor/ckeditor5-word-count/ckeditor5-metadata.json

Plugin	HTML output
Word count Feature guide API documentation	None.

mathtype-ckeditor5

Source file: not published yet

Plugin	HTML output
MathType Feature guide	<* *="*"> For a complete list of available MathML element and attribute names, visit MDN Web Docs for MathML.

wproofreader-ckeditor5

Source file: not published yet

Plugin	HTML output
WProofreader Feature guide	None.