Layout

grid #

Type: String

Default: false

Sets the class for the grid element. If this class exists in the content, the editor will build the layout component based on it.

Redactor('#entry', {
    layout: {
        grid: 'row'
    }
});

For example, if your content has HTML like this:

<div class="grid">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

In this case the editor will understand that the element with class grid is a layout component. And the div tags inside are columns.

column #

Type: String

Default: false

Sets the class for the column element of the grid. If this class exists in the content, the editor will build the column component based on it.

Redactor('#entry', {
    layout: {
        grid: 'row',
        column: 'col'
    }
});

For example, if your content has HTML like this:

<div class="grid">
    <div class="col">1</div>
    <div class="col">2</div>
    <div class="col">3</div>
</div>

In this case the editor will understand that the element with class grid is a layout component. And tags with col class are columns.

layouts #

Type: Object

The default 'layouts' object:

{
    "single": {
        title: "## layout.single-column ##",
        pattern: "100%"
    },
    "two-columns": {
        title: "## layout.two-columns ##",
        pattern: "50%|50%"
    },
    "three-columns": {
        title: "## layout.three-columns ##",
        pattern: "33%|33%|33%"
    },
    "four-columns": {
        title: "## layout.four-columns ##",
        pattern: "25%|25%|25%|25%"
    },
    "60-40": {
        title: "60/40",
        pattern: "60%|40%"
    },
    "40-60": {
        title: "40/60",
        pattern: "40%|60%"
    }
}

With this setting, you can change it, for example:

Redactor('#entry', {
    layouts: {
        "single": {
            title: "## layout.single-column ##",
            pattern: "100%"
        },
        "two-columns": {
            title: "## layout.two-columns ##",
            pattern: "50%|50%"
        }
    }
});

Or by replacing it entirely with a set param like this:

Redactor('#entry', {
    layouts: {
        set: true,
        "single": {
            title: "## layout.single-column ##",
            pattern: "100%"
        },
        "two-columns": {
            title: "## layout.two-columns ##",
            pattern: "50%|50%"
        }
    }
});

disable #

You can completely disable the layout adding, just set it false.

Redactor('#entry', {
    layouts: false
});