Horizontal line

The horizontal line feature allows inserting a horizontal line into the rich-text editor.

Often known as the horizontal rule, it provides a visual way to separate the content. It may indicate a thematic shift (like a change of topic) between paragraphs or parts of the story or just be a simple graphic separator to help organize the content.

# Demo

To insert a horizontal line in the demo below, use the toolbar button . Alternatively, start new line with --- to insert a horizontal line thanks to the autoformatting feature.

# Related features

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

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

# 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/src/horizontalline';

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

# Common API

The HorizontalLine plugin registers:

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

The command can be executed 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 in https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-horizontal-line.