CKEditor Ecosystem Documentation
Search
Contribute to this guide
Home/CKEditor 5/Features

guideText 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

The three greatest things you learn from traveling

Like all the great things on earth traveling teaches us by example. Here are some of the most precious lessons I’ve learned over the years of traveling.

Appreciation of diversity

Getting used to an entirely different culture can be challenging. While it’s also nice to learn about cultures online or from books, nothing comes close to experiencing cultural diversity in person. You learn to appreciate each and every single one of the differences while you become more culturally fluid.

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

Note that the 'left' option should always be included for the LTR content. Similarly, the 'right' option should always be included for the RTL content. Learn more about configuring language of the editor content.

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

The three greatest things you learn from traveling

Like all the great things on earth traveling teaches us by example. Here are some of the most precious lessons I’ve learned over the years of traveling.

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

The three greatest things you learn from traveling

Like all the great things on earth traveling teaches us by example. Here are some of the most precious lessons I’ve learned over the years of traveling.

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

# 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' } );

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