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.

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.

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

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.

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

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.

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.