Float image

This example shows how to float images to the left and right using the Style plugin.

    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">
            <p>Content</p>
        </textarea>
    
        <!-- js -->
        <script src="/your-article-dist-path/article-editor.min.js"></script>
    
        <!-- call -->
        <script>
        ArticleEditor('#entry', {
            plugins: ['style'],
            css: '/your-article-dist-path/',
            custom: {
                css: ['/your-article-dist-path/float.css']
            },
            styles: {
                image: {
                    'float-left': {
                        title: 'Float left',
                        classname: 'float-left'
                    },
                    'float-right': {
                        title: 'Float right',
                        classname: 'float-right'
                    }
                }
            }
        });
        </script>
    </body>
    </html>

    Usage

    In this example we include additional styles for float in the file float.css, its contents can be this way:

    .float-left {
        float: left;
        max-width: 200px;
        margin-right: 0.75rem;
    }
    .float-right {
        float: right;
        max-width: 200px;
        margin-left: 0.75rem;
    }