title | category |
---|---|
Autoformatting |
features |
The {@link module:autoformat/autoformat~Autoformat} feature allows you to quickly apply formatting to the content you are writing.
This feature is enabled by default in all builds.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. - 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 {@link module:heading/heading~HeadingConfig#options} defines more headings). - Block quote – Start a line with
>
followed by a space. - Code block – Start a line with
```
.
The following inline formatting options are available:
- Bold – Type
**text**
or__text__
, - Italic – Type
*text*
or_text_
, - Code – Type
`text`
, - Strikethrough – Type
~~text~~
.
Example:
- Delete all editor content.
- Press # and then Space.
- The current line will be turned into a heading.
{@snippet features/autoformat}
In addition to enabling automatic text formatting, you may want to check the following productivity features:
- {@link features/text-transformation Automatic text transformation} – It enables automatic turning snippets such as
(tm)
into™
and"foo"
into“foo”
. - {@link features/mentions Mentions} – It brings support for smart autocompletion.
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( ... );
The {@link module:autoformat/autoformatAutoformat} feature bases on {@link module:autoformat/blockautoformateditingBlockAutoformatEditing} and {@link module:autoformat/inlineautoformatediting~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.
The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5-autoformat.