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

Text alignment

The alignment feature lets you align your content to the left or right as well as center or justify it.

# Demo

Click inside a paragraph or a header and use the toolbar dropdown Text alignment to change the alignment of the element.

This demo presents a limited set of features. Visit the feature-rich editor example to see more in action.

# Installation

⚠️ New import paths

Starting with version 42.0.0, we changed the format of import paths. This guide uses the new, shorter format. Refer to the Packages in the legacy setup guide if you use an older version of CKEditor 5.

After installing the editor, add the feature to your plugin list and toolbar configuration:

import { ClassicEditor, Alignment } from 'ckeditor5';

ClassicEditor.
	create( document.querySelector( '#editor' ), {
		licenseKey: '<YOUR_LICENSE_KEY>' // Or 'GPL'.
		plugins: [ Alignment, /* ... */ ],
		toolbar: [ 'alignment', /* ... */ ]
		alignment: {
			// Configuration.
		}
	} )
	.then( /* ... */ )
	.catch( /* ... */ );

# Configuring alignment options

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

You should always include the 'left' option for the LTR content. Similarly, you should always include the 'right' option for the RTL content. Learn more about configuring language of the editor content.

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

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

# Using classes instead of inline style

By default, alignment is set inline using the text-align CSS property. If you wish the feature to output more semantic content that uses classes instead of inline styles, you can specify class names by using the className property in config.alignment.options and style them by using a style sheet.

Once you decide to use classes for the alignment, you must define className for all alignment entries in config.alignment.options.

The following configuration will set .my-align-left and .my-align-right to left and right alignment, respectively.

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        // ... Other configuration options ...
        alignment: {
            options: [
                { name: 'left', className: 'my-align-left' },
                { name: 'right', className: 'my-align-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' ), {
        // ... Other configuration options ...
        toolbar: [
            'heading', '|', 'alignment:left', 'alignment:right', 'alignment:center', 'alignment:justify'
        ]
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

CKEditor 5 has more features that can help you organize your content:

  • Document title – Clearly divide your content into a title and body.
  • Headings – Split your content into logical sections.
  • Block indentation – Organize your content into visually separated blocks, indent crucial paragraphs, etc.
  • Block quote – Include block quotations or pull quotes in the rich-text content.
  • Remove format – Easily clean basic text formatting.

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

# Content compatibility

The Alignment plugin provides support for the deprecated align attribute.

Block elements such as <p> with the align attribute are accepted by the plugin, but the editor always returns the markup in a modern format, so the transformation is one way only.

# Contribute

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