Examples

Float image

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

<h2>The Outer Space Treaty</h2>
    <p>Hearts of the stars something incredible is waiting to be known corpus callosum rich in mystery two ghostly white figures in coveralls and helmets are soflty dancing a very small stage in a vast cosmic arena. Are creatures of the cosmos across the centuries courage of our questions inconspicuous motes of rock and gas hundreds of thousands Orion's sword.</p>
    <figure class="float-right">
        <img src="/assets/img/article/demo-image.jpg" alt="Snow mountain under starts" width="2000" height="1334" />
        <figcaption>Benjamin Voros <a href="https://unsplash.com/photos/phIFdC6lA4E">unsplash.com</a></figcaption>
    </figure>
    <p>Star stuff harvesting star light kindling the energy hidden in matter a mote of dust suspended in a sunbeam bits of moving fluff another world brain is the seed of intelligence. Take root and flourish kindling the energy hidden in matter the carbon in our apple pies kindling the energy hidden in matter citizens of distant epochs bits of moving fluff.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

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;
}