Menu

Examples

Bulma cards

This example shows how Bulma Cards work in Article. Click the add button to open the addbar and insert the card.

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>

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

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

    <!-- call -->
    <script>
    ArticleEditor('#entry', {
        plugins: ['bulma-content'],
        css: ['/your-article-dist-path/article/arx-frame.min.css'],
        custom: {
            css: ['/path-to-bulma/bulma.min.css']
        },
        addbarAdd: ['card'],
        card: {
            template: '...html code of card...'
        }
    });
    </script>
</body>
</html>