Image position

Makes the image on the right, left or center of the text.

    Demo

    Click on the image to see the Image Position icon on the toolbar.

    Code

    <!DOCTYPE html>
    <html>
        <head>
            <title>Article Editor</title>
            <meta charset="utf-8">
    
            <!-- css -->
            <link rel="stylesheet" href="/your-article-dist-path/article-editor.css" />
        </head>
        <body>
            <!-- element -->
            <textarea id="entry">...</textarea>
    
            <!-- js -->
            <script src="/your-article-dist-path/article-editor.js"></script>
            <script src="/your-article-dist-path/plugins/counter.js"></script>
    
            <!-- call -->
            <script>
            ArticleEditor('#entry', {
                plugins: ['imageposition'],
                css: '/your-article-dist-path/'
            });
            </script>
        </body>
    </html>

    Usage

    By default, the editor sets these CSS classes for image position:

    left: 'float-left',
    center: 'align-center',
    right: 'float-right'
    

    This means that in the output code the image will have a class and will look like this:

    <figure class="float-left">
        <img src="...">
    </figure>
    

    You can change it to your classes by specifying them in the settings when you start the editor.

    ArticleEditor('#entry', {
        plugins: ['imageposition'],
        css: '/your-article-dist-path/'
        imageposition: {
            items: {
                left: 'my-float-left',
                center: 'my-align-center',
                right: 'my-float-right'
            }
        }
    });
    

    Now the class will be set into a block tag as specified in the settings.

    <figure class="my-float-left">
        <img src="...">
    </figure>
    

    You can specify your own styles for image positioning in a separate CSS file using the custom.css setting, for example, as follows:

    ArticleEditor('#entry', {
        plugins: ['imageposition'],
        css: '/your-article-dist-path/',
        custom: {
            css: ['/your-article-dist-path/your-image-styles.css']
        },
        imageposition: {
            items: {
                left: 'my-float-left',
                center: 'my-align-center',
                right: 'my-float-right'
            }
        }
    });
    

    As a result, your file your-image-styles.css can look like this:

    .my-align-center {
        text-align: center;
    }
    .my-align-center img {
        margin-left: auto;
        margin-right: auto;
        max-width: 500px;
    }
    .my-align-center figcaption {
        text-align: center;
    }
    .my-float-left {
        float: left;
        margin-right: 1.5em;
        margin-bottom: 1.5em;
        max-width: 300px;
    }
    .my-float-right {
        float: right;
        margin-left: 1.5em;
        margin-bottom: 1.5em;
        max-width: 300px;
    }
    

    Using the settings, you can disable unnecessary image position items.

    ArticleEditor('#entry', {
        plugins: ['imageposition'],
        css: '/your-article-dist-path/',
        imageposition: {
            items: {
                center: false
            }
        }
    });