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.

The alignment feature is enabled by default in the #document-editor document editor build only. See the installation section to learn how to enable it in your editor.

# Demo

Click inside a paragraph or a header and use the toolbar dropdown Text alignment to apply desired alignment to a paragraph.

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.

There are more CKEditor 5 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.

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

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.

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

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' ), {
        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' ), {
        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.

# 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 in https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-alignment.