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