Type: Object

Default: object

The align setting helps control the alignment of text in blocks.

The default align setting has the following button object:

{
    'align-left': {
        title: '## align.left ##',
        params: { classname: 'align-left' }
    },
    'align-center': {
        title: '## align.center ##',
        params: { classname: 'align-center' }
    },
    'align-right': {
        title: '## align.right ##',
        params: { classname: 'align-right' }
    },
    'align-justify': {
        title: '## align.justify ##',
        params: { classname: 'align-justify' }
    }
}

When you click on the alignment button the block has an align class specified in the parameters of the button. In CSS of the editor, it is written like this:

.arx-content .align-center {
    text-align: center;
}
.arx-content .align-center img {
    margin-left: auto;
    margin-right: auto;
}
.arx-content .align-center figcaption {
    text-align: center;
}

Note! Don't forget to implement alignment classes on your website where you are publishing the content from Article Editor.

You can change the alignment class names to those used in your content. To do this, create a CSS file, connect it after the CSS file of the editor, and write the classes like this:

.arx-content .my-class-center {
    text-align: center;
}

Now set new classes:

ArticleEditor('#entry', {
    align: {
        'align-left': {
            params: { classname: 'my-class-left' }
        },
        'align-center': {
            params: { classname: 'my-class-center' }
        },
        'align-right': {
            params: { classname: 'my-class-right' }
        },
        'align-justify': {
            params: { classname: 'my-class-justify' }
        }
    }
});

You can change the align object and turn off some alignment options, like so:

ArticleEditor('#entry', {
    align: {
        'align-left': {
            title: '## align.left ##',
            params: { classname: 'align-left' }
        },
        'align-center': {
            title: '## align.center ##',
            params: { classname: 'align-center' }
        },
        'align-right': false,
        'align-justify': false
    }
});

You can completely disable align feature set the setting false.

ArticleEditor('#entry', {
    align: false
});