Menu

Examples

Bootstrap grid

This example shows how to set up Bootstrap Grid for Article. See more about the grid setting.

Code

<!DOCTYPE html>
<html>
<head>
    <title>Article Editor</title>
    <meta charset="utf-8">

    <!-- css -->
    <link rel="stylesheet" href="/your-article-dist-path/article-editor.min.css" />
</head>
<body>
    <!-- element -->
    <textarea id="entry">
        <p>Content</p>
    </textarea>

    <!-- js -->
    <script src="/your-article-dist-path/article-editor.min.js"></script>

    <!-- call -->
    <script>
    ArticleEditor('#entry', {
        css: ['/your-article-dist-path/arx-frame.min.css'],
        custom: {
            css: ['/path-to-bootstrap/bootstrap.min.css']
        },
        grid: {
            classname: 'row',
            columns: 12,
            gutter: '1px',
            offset: {
                left: '15px',
                right: '15px'
            },
            patterns: {
                '6|6': 'col-6|col-6',
                '4|4|4': 'col-4|col-4|col-4',
                '3|3|3|3': 'col-3|col-3|col-3|col-3',
                '2|2|2|2|2|2': 'col-2|col-2|col-2|col-2|col-2|col-2',
                '3|6|3': 'col-3|col-6|col-3',
                '2|8|2': 'col-2|col-8|col-2',
                '5|7': 'col-5|col-7',
                '7|5': 'col-7|col-5',
                '4|8': 'col-4|col-8',
                '8|4': 'col-8|col-4',
                '3|9': 'col-3|col-9',
                '9|3': 'col-9|col-3',
                '2|10': 'col-2|col-10',
                '10|2': 'col-10|col-2',
                '12': 'col-12'
            }
        }
    });
    </script>
</body>
</html>