Contribute to this guide

guideHorizontal line

The HorizontalLine plugin provides the possibility to insert a horizontal line into the rich-text editor.

# Demo

Use the editor below to see the HorizontalLine plugin in action.

# 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-horizontal-line.