category: features
The {@link module:horizontal-rule/horizontalrule~HorizontalRule} plugin provides a possibility to insert a horizontal rule in the rich-text editor.
Use the editor below to see the {@link module:horizontal-rule/horizontalrule~HorizontalRule} plugin in action.
{@snippet features/horizontal-rule}
To add this feature to your rich-text editor, install the @ckeditor/ckeditor5-horizontal-rule package:
npm install --save @ckeditor/ckeditor5-horizontal-rule
And add it to your plugin list configuration:
import HorizontalRule from '@ckeditor/ckeditor5-horizontal-rule/src/horizontalrule';
ClassicEditor
.create( document.querySelector( '#editor' ), {
plugins: [ HorizontalRule, ... ],
toolbar: [ 'horizontalRule', ... ],
} )
.then( ... )
.catch( ... );
Read more about {@link builds/guides/integration/installing-plugins installing plugins}.
The {@link module:horizontal-rule/horizontalrule~HorizontalRule} plugin registers the UI button component ('horizontalRule') and the 'horizontalRule' command implemented by {@link module:horizontal-rule/horizontalrulecommand~HorizontalRuleCommand}.
The command can be executed using the {@link module:core/editor/editor~Editor#execute editor.execute()} method:
// Inserts the horizontal rule to the selected content.
editor.execute( 'horizontalRule' );
The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5-horizontal-rule.