Alignment

Offers seamless options for aligning text to the left, right, center, and justify, ensuring a polished and cohesive layout.

Code

<!DOCTYPE html>
<html>
    <head>
        <title>Redactor</title>
        <meta charset="utf-8">

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

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

        <!-- call -->
        <script>
        Redactor('#entry', {
            plugins: ['alignment']
        });
        </script>
    </body>
</html>

Usage

By default, the plugin has this array of alignment settings:


items: ['left', 'center', 'right', 'justify']

The editor sets these CSS for alignment like:


text-align: center

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


<p style="text-align: center">...</p>

Using the setting, you can specify only the values that are required:


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

By default, the plugin only adds its button to the toolbar. To add it to the context bar, enable the context setting:


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