8
0

text-alignment.md 2.8 KB


title: Text alignment

category: features

{@snippet features/build-text-alignment-source}

The {@link module:alignment/alignment~Alignment} feature enables support for text alignment. You can use it to align your content to left, right and center or justify it.

Demo

{@snippet features/text-alignment}

Configuring alignment options

It is possible to configure which alignment options are available in the editor by setting the {@link module:alignment/alignment~AlignmentConfig#options alignment.options} configuration option. You can choose from 'left', 'right', 'center' and 'justify'; note that 'left' should always be included.

For example, the following editor will support only two alignment options: to the left and to the right:

ClassicEditor
	.create( document.querySelector( '#editor' ), {
		alignment: {
			options: [ 'left', 'right' ]
		},
		toolbar: [
			'headings', '|', 'bulletedList', 'numberedList', 'alignment', 'undo', 'redo'
		]
	} )
	.then( ... )
	.catch( ... );

{@snippet features/custom-text-alignment-options}

Configuring the toolbar

You can choose to use the alignment drop-down ('alignment') or configure the toolbar to use separate buttons for each of the options:

ClassicEditor
	.create( document.querySelector( '#editor' ), {
		toolbar: [
			'headings', '|', 'alignment:left', 'alignment:right', 'alignment:center', 'alignment:justify'
		]
	} )
	.then( ... )
	.catch( ... );

{@snippet features/custom-text-alignment-toolbar}

Installation

To add this feature to your editor install the @ckeditor/ckeditor5-alignment package:

npm install --save @ckeditor/ckeditor5-alignment

And add it to your plugin list and toolbar configuration:

import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';

ClassicEditor
	.create( document.querySelector( '#editor' ), {
		plugins: [ Alignment, ... ],
		toolbar: [ 'alignment', ... ]
	} )
	.then( ... )
	.catch( ... );

Read more about {@link builds/guides/development/installing-plugins installing plugins}.

Common API

The {@link module:alignment/alignment~Alignment} plugin registers:

  • Drop-down: 'alignment'.
  • Buttons: 'alignment:left', 'alignment:right', 'alignment:center', 'alignment:justify'.

    The number of options and their names are based on the {@link module:alignment/alignment~AlignmentConfig#options alignment.options} configuration option).

  • Command: 'alignment':

    You can align the currently selected block(s) by executing one of these commands:

    editor.execute( 'align', { value: 'center' } );
    

Contribute

The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5-alignment.