Align text left, center, right or justify. This plugin applies a specific class to selected text.


<!DOCTYPE html>
        <meta charset="utf-8">

        <!-- css -->
        <link rel="stylesheet" href="/your-folder/redactorx.css" />
        <!-- element -->
        <textarea id="entry">...</textarea>

        <!-- js -->
        <script src="/your-folder/redactorx.js"></script>
        <script src="/your-folder/plugins/alignment.js"></script>

        <!-- call -->
        RedactorX('#entry', {
            plugins: ['alignment']


By default, the editor sets these CSS classes for alignment:

left: 'align-left',
center: 'align-center',
right: 'align-right',
justify: 'align-justify'

This means that in the output code a block tag with a class will look like this:

<p class="align-center">...</p>

You can change to your classes by specifying them in the settings when you start the editor.

RedactorX('#entry', {
    plugins: ['alignment'],
    alignment: {
        align: {
            left: 'my-align-left',
            center: 'my-align-center',
            right: 'my-align-right',
            justify: 'my-align-justify'

Now a class will be set into a block tag as specified in the settings.

<p class="my-align-center">...</p>

You also need to add styles for the editable layer, so that the styles of these classes are applied in the editor view.

.rx-content .my-align-left { text-align: left; }
.rx-content .my-align-right { text-align: right; }
.rx-content .my-align-center { text-align: center; }
.rx-content .my-align-justify { text-align: justify; }

Using the settings, you can disable unnecessary alignment items.

RedactorX('#entry', {
    plugins: ['alignment'],
    alignment: {
        align: {
            right: false,
            justify: false