Contribute to this guide

guideFeatures’ HTML output overview

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.

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

CKFinderUploadAdapter

None.

ckeditor5-alignment

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

Plugin HTML output

Alignment

Alignment

<$block style="text-align:*">

By default, the alignment feature uses the text-align inline style.

<$block class="*">

If config.alignment.options is set, then these classes are used for alignment instead of inline styles.

ckeditor5-autoformat

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

Plugin HTML output

Autoformat

Autoformat

None.

ckeditor5-autosave

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

Plugin HTML output

Autosave

Autosave

None.

ckeditor5-basic-styles

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

Plugin HTML output

Bold

Bold

<strong>

Code

Code

<code>

Italic

Italic

<i>

Strikethrough

Strikethrough

<s>

Subscript

Subscript

<sub>

Superscript

Superscript

<sup>

Underline

Underline

<u>

ckeditor5-block-quote

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

Plugin HTML output

Block quote

BlockQuote

<blockquote>

ckeditor5-ckfinder

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

Plugin HTML output

CKFinder

CKFinder

None.

ckeditor5-cloud-services

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

Plugin HTML output

Cloud Services

CloudServices

None.

ckeditor5-code-block

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

Plugin HTML output

Code blocks

CodeBlock

<pre>
<code class="* language-*">

By default, the language of the code block is represented as a CSS class prefixed by language-. CSS class name can be customized via config.codeBlock.languages array.

ckeditor5-comments

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

Plugin HTML output

Comments

Comments

<comment
id="*"
type="*"
>
<comment-end name="*"><comment-start name="*">
<*
data-comment-end-after="*"
data-comment-start-before="*"
>

The plugin adds data-comment-end-after and data-comment-start-before attributes to other elements on which comments starts or ends.

ckeditor5-easy-image

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

Plugin HTML output

Easy Image

EasyImage

None.

ckeditor5-essentials

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

Plugin HTML output

Essentials

Essentials

<br>

ckeditor5-export-pdf

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

Plugin HTML output

Export to PDF

ExportPdf

None.

ckeditor5-export-word

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

Plugin HTML output

Export to Word

ExportWord

None.

ckeditor5-font

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

Plugin HTML output

Font background color

FontBackgroundColor

<span style="background-color:*">

Font color

FontColor

<span style="color:*">

Font size

FontSize

<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, then the feature uses class names.

<span style="font-size:*">

If the config.fontSize.options option contains numerical values, then 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

FontFamily

<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-heading

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

Plugin HTML output

Title

Title

<h1>

Heading

Heading

<h2><h3><h4>

HTML element may contain classes, styles or attributes, that are created by other plugins, which alter the <$block> element.

<*>

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

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 <mark> element.

ckeditor5-horizontal-line

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

Plugin HTML output

Horizontal line

HorizontalLine

<hr>

ckeditor5-html-embed

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

Plugin HTML output

HTML embed

HtmlEmbed

<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-image

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

Plugin HTML output

Auto image

AutoImage

None.

Image

Image

<figure class="image">
<img
alt="*"
sizes="*"
src="*"
srcset="*"
width="*"
>

Image caption

ImageCaption

<figcaption>

Image resize

ImageResize

<figure
class="image_resized"
style="width:*"
>

Image style

ImageStyle

<figure class="image-style-side image-style-align-left image-style-align-center image-style-align-right">
<figure class="*">

The plugin can be configured to set any class names on the <figure> element.

Image toolbar

ImageToolbar

None.

Image upload

ImageUpload

None.

Image insert

ImageInsert

None.

ckeditor5-indent

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

Plugin HTML output

Indent

Indent

None.

Indent block

IndentBlock

<$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

TextPartLanguage

<span
dir="*"
lang="*"
>

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

Plugin HTML output

Autolink

AutoLink

None.

Link

Link

<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

LinkImage

<a href="*">

ckeditor5-list

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

Plugin HTML output

List

List

<ol><ul>
<li>

HTML element may contain classes, styles or attributes, that are created by other plugins, which alter the <$block> element.

To-do list

TodoList

<ul class="todo-list">
<li>
<label class="todo-list__label">
<span class="todo-list__label__description">
<input
checked="*"
disabled="*"
type="*"
>

List style

ListStyle

<ol style="list-style-type:*"><ul style="list-style-type:*">

ckeditor5-markdown-gfm

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

Plugin HTML output

Markdown

Markdown

None.

ckeditor5-media-embed

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

Plugin HTML output

Media embed

MediaEmbed

<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

MediaEmbedToolbar

None.

ckeditor5-mention

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

Plugin HTML output

Mention

Mention

<span
class="mention"
data-mention="*"
>

ckeditor5-page-break

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

Plugin HTML output

Page break

PageBreak

<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

Pagination

<*
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

Paragraph

<p>

HTML element may contain classes, styles or attributes, that are created by other plugins, which alter the <$block> element.

ckeditor5-paste-from-office

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

Plugin HTML output

Paste from Office

PasteFromOffice

None.

ckeditor5-real-time-collaboration

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

Plugin HTML output

Presence list

PresenceList

None.

Real-time collaborative comments

RealTimeCollaborativeComments

None.

Real-time collaborative editing

RealTimeCollaborativeEditing

None.

Real-time collaborative track changes

RealTimeCollaborativeTrackChanges

None.

ckeditor5-remove-format

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

Plugin HTML output

Remove format

RemoveFormat

None.

ckeditor5-restricted-editing

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

Plugin HTML output

Restricted editing mode

RestrictedEditingMode

<span class="restricted-editing-exception">

Standard editing mode

StandardEditingMode

<span class="restricted-editing-exception">

ckeditor5-revision-history

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

Plugin HTML output

Revision History

RevisionHistory

None.

ckeditor5-special-characters

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

Plugin HTML output

Special characters

SpecialCharacters

None.

Special characters essentials

SpecialCharactersEssentials

None.

Special characters arrows

SpecialCharactersArrows

None.

Special characters currency

SpecialCharactersCurrency

None.

Special characters latin

SpecialCharactersLatin

None.

Special characters mathematical

SpecialCharactersMathematical

None.

Special characters text

SpecialCharactersText

None.

ckeditor5-table

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

Plugin HTML output

Table

Table

<figure class="table">
<table><thead><tbody><tr>
<td
colspan="*"
rowspan="*"
>
<th
colspan="*"
rowspan="*"
>

Table cell properties

TableCellProperties

<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

TableProperties

<figure style="float:*; height:*; width:*">
<table style="background-color:*; border:*; border-*:*">

Table toolbar

TableToolbar

None.

Table caption

TableCaption

<figcaption data-placeholder="*">

ckeditor5-track-changes

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

Plugin HTML output

Track changes

TrackChanges

None.

ckeditor5-typing

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

Plugin HTML output

Text transformation

TextTransformation

None.

ckeditor5-ui

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

Plugin HTML output

Block toolbar

BlockToolbar

None.

ckeditor5-upload

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

Plugin HTML output

Base64 upload adapter

Base64UploadAdapter

None.

Simple upload adapter

SimpleUploadAdapter

None.

ckeditor5-watchdog

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

Plugin HTML output

Watchdog

EditorWatchdog

None.

ckeditor5-word-count

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

Plugin HTML output

Word count

WordCount

None.

mathtype-ckeditor5

Source file: not published yet

Plugin HTML output

MathType

MathType

<* *="*">

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

WProofreader

None.