CKEditor Ecosystem Documentation
Search
Contribute to this guide
Home/CKEditor 5/Features

guideAutoformatting

The Autoformat feature allows you to quickly apply formatting to the content you are writing with the use of shortcodes.

Employ Markdown-like inline codes as you type for a faster and more efficient editing workflow. Speed up and simplify the process by skipping the need to use toolbar buttons and dropdowns for the most common formatting features with these easy to memorize options listed below.

This feature is enabled by default in all builds.

# 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. or 1) followed by a space.
  • To-do list – Start a line with [ ] followed by a space.
  • 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 if options 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~~.

# Autoformatting sample

Example:

  1. Delete all editor content.
  2. Press # and then Space.
  3. The current line will be turned into a heading.

This is the CKEditor 5 autoformatting feature.

Use Markdown syntax shortcodes to format content on the go.

In addition to enabling automatic text formatting, you may want to check the following productivity features:

  • Automatic text transformation – Enables automatic turning 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.
  • Markdown output – Output your content as Markdown instead of HTML and use CKEditor 5 as a WYSIWYG Markdown editor.

# Installation

This feature is enabled by default in all builds. The installation instructions are for developers interested in building their own, custom editor.

To add this feature to your editor install the @ckeditor/ckeditor5-autoformat package:

npm install --save @ckeditor/ckeditor5-autoformat

And add it to your plugin list:

import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat';

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.

Read more about installing plugins.

# 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.

# Contribute

The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-autoformat.