Bulma content

This example shows how to connect Bulma CSS for Article.

    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>
    
        <!-- 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']
            }
        });
        </script>
    </body>
    </html>

    Usage

    This example shows how to connect Bulma CSS 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 Bulma css file.

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

    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-bulma/bulma.min.css',
                '/path-to-my-styles/my-styles.min.css'
            ]
        }
    });
    

    Unfortunately, Bulma requires to be placed content in div with a "content" class. So you will need a custom block and a plugin for that:

    So you will need to connect the custom block and plugin on the page, and set up the plugin in the settings:

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