Redactor / Examples

This example shows that Bootstrap components work fine inside Redactor content and their text can be edited. 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'
    },
    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>