Menu

Examples

UIkit slideshow

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

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

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

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

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

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

    <!-- call -->
    <script>
    ArticleEditor('#entry', {
        plugins: ['slideshow'],
        css: ['/your-article-dist-path/arx-frame.min.css'],
        custom: {
            css: ['/path-to-uikit/uikit.min.css'],
            js: ['/path-to-uikit/uikit.min.js']
        },
        slideshow: {
            upload: '/image-uploader-path/',
            select: '/path-to-images/images.json'
        }
    });
    </script>
</body>
</html>

Usage

UI kit slideshow requires the creation of a custom block and a plugin to add and edit the slideshow.

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

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