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.
The horizontal line feature is enabled by default in the superbuild only. See the installation section to learn how to enable it in your editor.
# Demo
To insert a horizontal line in the demo below, use the toolbar button ---
to insert a 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.
This demo only presents a limited set of features. Visit the full-featured editor example to see more in action.
# 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( ... );
Read more about installing plugins.
# Common API
The HorizontalLine
plugin registers:
- the UI button component (
'horizontalLine'
), - the
'horizontalLine'
command implemented byHorizontalLineCommand
.
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.
Every day, we work hard to keep our documentation complete. Have you spotted outdated information? Is something missing? Please report it via our issue tracker.