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.

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.
  • 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 ```.

# Inline formatting

The following inline formatting options are available:

  • Bold – Type **text** or __text__,
  • Italic – Type *text* or _text_,
  • Code – 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 CKEditor 5.

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

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

# Contribute

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