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

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 Horizontal line. Alternatively, start a new line with ---. The autoformatting feature will turn it into a horizontal line.

Bill’s Classifieds

 

Will buy bricks. Any number, any size. Write Ignatz at 1913 PO Box, Coconino County, AZ

Homemade lasagna, w/ delivery. Call Jon at 555-1978

The fearless tiger hunter, for all your tiger-hunting needs you might have. Bloodless and effective. 1985-1995, Calvin

Second-hand clothing items, various condition, cheap. Call Gamma-Ray Labs, ask for Bruce.

Butler services. Service covers: buttling, cooking, military medicine, advanced mechanics. Witty remarks and talkbacks included. Box: DC#27

A poor student will take photos for food. Competitive prices. Forest Hills 1962, AF#15, ask for Peter.

Mechanical, bionical, and biological repairs. Accepting rainchecks. Contact dr. Ido.

This demo presents a limited set of features. Visit the feature-rich editor example to see more in action.

# Installation

⚠️ New import paths

Starting with version 42.0.0, we changed the format of import paths. This guide uses the new, shorter format. Refer to the Packages in the legacy setup guide if you use an older version of CKEditor 5.

After installing the editor, add the feature to your plugin list and toolbar configuration:

import { ClassicEditor, HorizontalLine } from 'ckeditor5';

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

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' );

We recommend using the official CKEditor 5 inspector for development and debugging. It will give you tons of useful information about the state of the editor such as internal data structures, selection, commands, and many more.

# Contribute

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