UIkit content

This example shows how to connect UI kit framework for Article. See more about the grid setting.

    Demo

    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']
        }
    });