Menu

Examples

Bootstrap carousel

This example shows how Bootstrap Carousel work in Article. You can see the carousel already added to the content and edit it, as well as click the add button to open the addbar and insert the carousel.

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" />

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

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

    <!-- carousel custom block -->
    <script src="/your-article-dist-path/blocks/block.bs-carousel.js"></script>

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

    <!-- call -->
    <script>
    ArticleEditor('#entry', {
        plugins: ['carousel'],
        css: ['/your-article-dist-path/arx-frame.min.css'],
        custom: {
            css: ['/path-to-bootstrap/bootstrap.min.css'],
            js: [
                'https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js',
                'https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js'
            ]
        },
        carousel: {
            upload: '/image-uploader-path/',
            select: '/path-to-images/images.json'
        }
    });
    </script>
</body>
</html>

Usage

Bootstrap Carousel requires the creation of a custom block and a plugin to add and edit the carousel.

Uploading images for carousel works on the same principles as regular image upload:

carousel: {
    upload: '/image-uploader-path/',
    select: '/path-to-images/images.json'
}