Menu

Examples

Float image

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

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