Redactor / Examples

This example shows how the Bootstrap grid works inside Redactor content. Also the entire page has Bootstrap styles in this example, and Redactor inherits them for the content. See below for a example code of launching the editor.

Code

<!DOCTYPE html>
<html>
<head>
    <title>Redactor</title>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">

    <!-- Redactor CSS -->
    <link rel="stylesheet" href="/your-dist-path/redactor.min.css" />

</head>
<body>
<!-- element -->
<textarea id="entry">
    ...
</textarea>

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

<!-- Redactor JS -->
<script src="/your-dist-path/redactor.min.js"></script>

<!-- Call  -->
<script>
let app = Redactor('#entry', {
    nostyle: true,
    context: true,
    classes: {
        tags: {
            img: 'img-fluid',
            table: 'table table-bordered'
        }
    },
    embed: {
        responsive: 'embed-responsive embed-responsive-16by9'
    },
    layout: {
        grid: 'row',
        column: 'col'
    },
    layouts: {
        set: true,
        'one-column': {
            title: 'One column',
            grid: 'row',
            pattern: 'col'
        },
        'two-columns': {
            title: 'Two columns',
            grid: 'row',
            pattern: 'col|col'
        },
        'three-columns': {
            title: 'Three columns',
            grid: 'row',
            pattern: 'col|col|col'
        },
        'four-columns': {
            title: 'Four columns',
            grid: 'row',
            pattern: 'col|col|col|col'
        },
        '8-4': {
            title: '8 + 4',
            grid: 'row',
            pattern: 'col-8|col-4'
        }
    }
});
</script>
</body>
</html>