Redactor / Examples

In this example, the entire page has Bootstrap styles 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'
        }
    }
});
</script>
</body>
</html>