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.

The Flavorful Tuscany Meetup

Welcome letter

Dear Guest,

We are delighted to welcome you to the annual Flavorful Tuscany Meetup and hope you will enjoy the programme as well as your stay at the Bilancino Hotel.

Please arrive at the Bilancino Hotel reception desk at least half an hour earlier to make sure that the registration process goes as smoothly as possible.

We look forward to welcoming you to the event. The full schedule can be found below.

Victoria Valc

Event Manager
Bilancino Hotel


The Flavorful Tuscany Meetup Schedule

Saturday, July 14
9:30 AM - 11:30 AM

Americano vs. Brewed - “know your coffee” with: 

  • Giulia Bianchi
  • Stefano Garau
  • Giuseppe Russo
1:00 PM - 3:00 PM

Pappardelle al pomodoro - live cooking

Incorporate the freshest ingredients 
with Rita Fresco

5:00 PM - 8:00 PM Tuscan vineyards at a glance - wine-tasting 
with Frederico Riscoli

 

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