Menu

Examples

UIkit content

This example shows how to connect UI kit framework 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">...</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-uikit/uikit.min.css'],
            js: ['/path-to-uikit/uikit.min.js']
        },
        addbarAdd: ['card'],
        card: {
            classname: 'uk-card',
            template: '... html code of card ...'
        },
        grid: {
            classname: 'uk-grid',
            classes: 'uk-child-width-expand@s',
            columns: 12,
            offset: {
                left: '30px'
            },
            gutter: '30px',
            patterns: {
                '12': '',
                '6|6': '',
                '4|4|4': '',
                '3|3|3|3': '',
                '2|2|2|2|2|2': ''
            }
        }
    });
    </script>
</body>
</html>

Usage

This example shows how to connect UI kit framework for Article. This is done in a few steps.

The first one. You need to connect Article styles that provide display of editing controls: 

ArticleEditor('#entry', {
    css: ['/your-article-dist-path/arx-frame.min.css']
});

Second. You need to connect the UI kit files.

ArticleEditor('#entry', {
    css: ['/your-article-dist-path/arx-frame.min.css'],
    custom: {
        css: ['/path-to-uikit/uikit.min.css'],
        js: ['/path-to-uikit/uikit.min.js']
    }
});

And third. This is how you can connect a file with your styles:

ArticleEditor('#entry', {
    css: ['/your-article-dist-path/arx-frame.min.css'],
    custom: {
        css: [
            '/path-to-uikit/uikit.min.css',
            '/path-to-my-styles/my-styles.min.css'
        ],
        js: ['/path-to-uikit/uikit.min.js']
    }
});