Float image

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


    <!DOCTYPE html>
        <title>Article Editor</title>
        <meta charset="utf-8">
        <!-- css -->
        <link rel="stylesheet" href="/your-article-dist-path/article-editor.min.css" />
        <!-- element -->
        <textarea id="entry">
        <!-- js -->
        <script src="/your-article-dist-path/article-editor.min.js"></script>
        <!-- call -->
        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'


    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;