CKEditor Ecosystem Documentation
Search
⚠️ WarningNightly documentation ahead. Switch to the stable editor documentation.
Home/CKEditor 5/API
Interface

AlignmentConfig (alignment)

@ckeditor/ckeditor5-alignment/src/alignment

interface
See source

The configuration of the alignment feature.

ClassicEditor
	.create( editorElement, {
		alignment: {
			options: [ 'left', 'right' ]
		}
	} )
	.then( ... )
	.catch( ... );

See all editor configuration options.

Filtering

Properties

  • options : Array.<(String | AlignmentFormat)>

    Available alignment options.

    See source

    The available options are: 'left', 'right', 'center' and 'justify'. Other values are ignored.

    Note: It is recommended to always use 'left' or 'right' as these are default values which the user should normally be able to choose depending on the language of the editor content.

    ClassicEditor
	.create( editorElement, {
		alignment: {
			options: [ 'left', 'right' ]
		}
	} )
	.then( ... )
	.catch( ... );

    By default the alignment is set inline using the text-align CSS property. To further customize the alignment, you can provide names of classes for each alignment option using the className property.

    Note: Once you define the className property for one option, you need to specify it for all other options.

    ClassicEditor
	.create( editorElement, {
		alignment: {
			options: [
				{ name: 'left', className: 'my-align-left' },
				{ name: 'right', className: 'my-align-right' }
			]
		}
	} )
	.then( ... )
	.catch( ... );

    See the demo of custom alignment options.