Contribute to this guide

guideHorizontal line

The HorizontalLine plugin 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 horizontal line, use the toolbar button. Alternatively, start the line with --- to insert horizontal line thanks to the autoformatting feature.

Bill’s Classifieds

 

Will buy bricks. And 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.

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( ... );

Read more about installing plugins.

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

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