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 ---
. The autoformatting feature will turn it into a horizontal line.
This demo presents a limited set of features. Visit the feature-rich editor example to see more in action.
# Installation
The horizontal line feature is enabled by default in the superbuild only.
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( /* ... */ );
Read more about installing plugins.
# 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 byHorizontalLineCommand
.
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.
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.