Text alignment

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

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

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

const { ClassicEditor, Alignment } = CKEDITOR;

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

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

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.

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

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.

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

  Copy code

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.

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