Horizontal line

The horizontal line feature lets you visually divide your content into sections by inserting horizontal lines (also known as horizontal rules). It is an easy way to organize the content or indicate a change of topic.

# Demo

To insert a horizontal line in the demo below, use the toolbar button . Alternatively, start a new line with ---. The autoformatting feature will turn it into a horizontal line.

# Installation

To add this feature to your rich-text editor, install the @ckeditor/ckeditor5-horizontal-line package:

npm install --save @ckeditor/ckeditor5-horizontal-line

And add it to your plugin list configuration:

import { HorizontalLine } from '@ckeditor/ckeditor5-horizontal-line';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ HorizontalLine, /* ... */ ],
        toolbar: [ 'horizontalLine', /* ... */ ],
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

# Related features

CKEditor 5 has more features that can help you better organize your document content:

• Headings – Organize your content into thematic sections.
• Page break – Divide your document into pages.
• Document title – Clearly separate the title from the body.
• Lists – Create ordered (numbered) and unordered (bulleted) lists.
• Autoformatting – Format the content on the go with Markdown code.

# Common API

The HorizontalLine plugin registers:

• the UI button component ('horizontalLine'),
• the 'horizontalLine' command implemented by HorizontalLineCommand.

You can execute the command using the editor.execute() method:

// Inserts a horizontal line into the selected content.
editor.execute( 'horizontalLine' );

# Contribute

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