Documentation

Outset

Type: Object

Default: object

The outset setting helps expand blocks by the size of the content layout.

By default, the outset setting applies only to image blocks and consists of the following button object:

{
    'outset-none': {
        title: '## outset.none ##',
        params: { classname: false }
    },
    'outset-left': {
        title: '## outset.left ##',
        params: { classname: 'outset-left' }
    },
    'outset-both': {
        title: '## outset.both ##',
        params: { classname: 'outset-both' }
    },
    'outset-right': {
        title: '## outset.right ##',
        params: { classname: 'outset-right' }
    }
}

When you click on the outset button, the class specified in the button parameters is added to the block. In the CSS of the editor, it is written like this:

.arx-content .outset-both {
    width: calc(100% + 56px);
    max-width: calc(100% + 56px);
    transform: translateX(-50%);
    position: relative;
    left: 50%;
}

Where 56px is the sum of the left and right paddings of the content layout.

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

.arx-content .my-class-both {
    ... your css ...
}

Now set new classes to the setting:

ArticleEditor('#entry', {
    outset: {
        'outset-both': {
            params: { classname: 'my-class-both' }
        },
        'outset-right': {
            params: { classname: 'my-class-right' }
        },
        'outset-left': {
            params: { classname: 'my-class-left' }
        }
    }
});

You can change the outset object and turn off some features, like this:

ArticleEditor('#entry', {
    outset: {
        'outset-none': {
            title: '## outset.none ##',
            params: { classname: false }
        },
        'outset-both': {
            title: '## outset.both ##',
            params: { classname: 'outset-both' }
        },
        'outset-left': false,
        'outset-right': false
    }
});

You can completely disable outset, just set false.

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