Alignment

Adds a toolbar button for block text alignment (left, center, right, justify). Works on the current editable block or on all selected editable blocks at once.

Select a paragraph, click Alignment in the toolbar, and pick an option from the dropdown.

Load the bundle

<script src="/assets/redactor/redactor.js"></script>
<script src="/assets/redactor/plugins/alignment/alignment.js"></script>

Initialization

const app = Redactor('#entry', {
    plugins: ['alignment']
});

Options

context (boolean)
- default false
- When true, adds the alignment button to the context toolbar as well.
items (string[])
- default ['left', 'center', 'right', 'justify']
- Alignment choices shown in the dropdown. Order is preserved. |
icons (object)
- SVG icons per item | Icon HTML for the toolbar button and each dropdown item. Keys match items (left, center, right, justify). |

Redactor('#entry', {
    plugins: ['alignment'],
    alignment: {
        context: true,
        items: ['left', 'center', 'right']
    }
});

Language strings

en: {
    alignment: {
        alignment: 'Alignment',
        left: 'Left',
        center: 'Center',
        right: 'Right',
        justify: 'Justify',
    }
}

Events

This plugin does not emit events.

API

get

Returns the current text alignment for editable block(s) in the selection.

Returns: string | boolean — false when multiple blocks have mixed alignment. Omits the default side for the current text direction (left in LTR, right in RTL).

const align = app.alignment.get();

set

Applies alignment to the current editable block(s) and closes the dropdown.

Parameters:

name (string) — one of left, center, right, justify.

app.alignment.set({ name: 'center' });