Text alignment

The Alignment feature enables support for text alignment. You can use it to align your content to left, right and center or to justify it.

# Demo

# Configuring alignment options

It is possible to configure which alignment options are available in the editor by setting the alignment.options configuration option. You can choose from 'left', 'right', 'center' and 'justify'.

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: [
            'heading', '|', 'bulletedList', 'numberedList', 'alignment', 'undo', 'redo'
        ]
    } )
    .then( ... )
    .catch( ... );

# Configuring the toolbar

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

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

# 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( ... );

# Common API

The Alignment plugin registers:

• Dropdown: 'alignment'.

• Buttons: 'alignment:left', 'alignment:right', 'alignment:center', 'alignment:justify'.

  The number of options and their names are based on the alignment.options configuration option).

• Command: 'alignment':

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

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

# Contribute

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