Autoformatting
The autoformat feature lets you quickly format your content with Markdown-like shortcodes. This way you do not need to use toolbar buttons or dropdowns for the most common formatting features.
# Demo
Test the autoformatting feature in the editor below. Try using Markdown shortcodes while typing. For example:
- Start a new line.
- Press # and then Space.
The line will automatically turn into a heading.
If needed, you can revert the automatic change by pressing Backspace.
This is the CKEditor 5 autoformatting feature.
Use Markdown syntax shortcodes to format content on the go. For example:
- Type
_
or*
around some text to make it italics. - Type
__
or**
around some text to make it bold. - Start a line with
1.
followed by a space to create an ordered list. - Start a line with
-
followed by a space to create an unordered list. - Start a line with
ˋˋˋ
to create a code block.
This demo presents a limited set of features. Visit the feature-rich editor example to see more in action.
# Block formatting
The following block formatting options are available:
- Bulleted list – Start a line with
*
or-
followed by a space. - Numbered list – Start a line with
1.
or1)
followed by a space. - To-do list – Start a line with
[ ]
or[x]
followed by a space to insert an unchecked or checked list item, respectively. - Headings – Start a line with
#
or##
or###
followed by a space to create a heading 1, heading 2, or heading 3 (up to heading 6 ifoptions
defines more headings). - Block quote – Start a line with
>
followed by a space. - Code block – Start a line with
```
. - Horizontal line – Start a line with
---
.
# Inline formatting
The following basic styles inline formatting options are available:
- Bold – Type
**text**
or__text__
, - Italic – Type
*text*
or_text_
, - Code – Type
`text`
, - Strikethrough – Type
~~text~~
.
# Installation
⚠️ New import paths
Starting with version 42.0.0, we changed the format of import paths. This guide uses the new, shorter format. Refer to the Packages in the legacy setup guide if you use an older version of CKEditor 5.
After installing the editor, add the feature to your plugin list and toolbar configuration:
import { ClassicEditor, Autoformat } from 'ckeditor5';
ClassicEditor.
create( document.querySelector( '#editor' ), {
plugins: [ Autoformat, /* ... */ ],
toolbar: [ /* ... */ ]
} )
.then( /* ... */ )
.catch( /* ... */ );
Remember to add proper features to the editor configuration. Autoformatting will be enabled only for the commands that are included in the actual configuration. For example, bold
autoformatting will not work if there is no bold
command registered in the editor.
# Creating custom autoformatters
The Autoformat
feature bases on blockAutoformatEditing
and inlineAutoformatEditing
tools to create the autoformatters mentioned above.
You can use these tools to create your own autoformatters. Check the Autoformat
feature’s code as an example.
# Known issues
While the autoformatting feature is stable and ready to use, some issues were reported for it. Feel free to upvote 👍 them on GitHub if they are important for you:
- Pasting Markdown-formatted content does not automatically convert the pasted syntax markers into properly formatted content. GitHub issues: #2321, #2322.
- Setting a specific code block language is not supported yet (it defaults to plain text on insertion). GitHub issue: #8598.
# Related features
In addition to enabling automatic text formatting, you may want to check the following productivity features:
- Automatic text transformation – Enables automatic turning of snippets such as
(tm)
into™
and"foo"
into“foo”
. - Autolink – Turns the links and email addresses typed or pasted into the editor into active URLs.
- Mentions – Brings support for smart autocompletion.
- Slash commands – Allows to execute a predefined command by writing its name or alias directly in the editor.
- Markdown output – Lets the user output the content as Markdown instead of HTML and use CKEditor 5 as a WYSIWYG Markdown editor.
- Source editing – Allows for Markdown source edition if configured accordingly.
Coupled with the Markdown output feature, the autoformatting feature allows for the full-fledged Markdown WYSIWYG editing experience, as described in the “CKEditor 5: the best open source Markdown editor” blog post. Visit the free online Markdown editor to see this solution implemented.
# Contribute
The source code of the feature is available on GitHub at https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-autoformat.
Every day, we work hard to keep our documentation complete. Have you spotted outdated information? Is something missing? Please report it via our issue tracker.
With the release of version 42.0.0, we have rewritten much of our documentation to reflect the new import paths and features. We appreciate your feedback to help us ensure its accuracy and completeness.