Click on a paragraph, video or horizontal line and change their style.

<h2>The Outer Space Treaty</h2>
<hr>
<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>
    <div class="embed-responsive">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/R_xmf-v6VZc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
    <figcaption>Video of the space laboratory </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>

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/style.js"></script>

        <!-- call -->
        <script>
        ArticleEditor('#entry', {
            plugins: ['style'],
            css: '/your-article-dist-path/',
            custom: {
                css: ['/your-article-dist-path/your-style-plugin.css']
            },
            styles: {
                paragraph: {
                    'lead': {
                        title: '<span style="font-size: 24px; color: #444;">Lead</span>',
                        classname: 'st-lead'

                    },
                    'note': {
                        title: '<span style="background-color: #fffcba; color: #111; display: block;">Note</span>',
                        classname: 'st-note'
                    },
                    'accent': {
                        title: '<span style="font-weight: bold; font-size: 20px;">Accent</span>',
                        classname: 'st-accent'
                    }
                },
                embed: {
                    'frame': {
                        title: 'Frame',
                        classname: 'st-embed-frame'
                    },
                    'raised': {
                        title: 'Raised',
                        classname: 'st-embed-raised'
                    }
                },
                line: {
                    'black-extra-height': {
                        title: '<span style="display: block; height: 4px; background: #000;"></span>',
                        classname: 'st-line-black-extra-height'
                    },
                    'gray-dashed': {
                        title: '<span style="display: block; border-top: 2px dashed #ccc;"></span>',
                        classname: 'st-line-gray-dashed'
                    },
                    'blue-line': {
                        title: '<span style="display: block; height: 2px; background: #458fff;"></span>',
                        classname: 'st-line-blue'
                    }
                }
            },
        });
        </script>
    </body>
</html>

Usage

You can specify styles for each block as a setting when launching the editor.

ArticleEditor('#entry', {
    plugins: ['style'],
    css: '/your-article-dist-path/',
    custom: {
        css: ['/your-article-dist-path/your-style-plugin.css']
    },
    styles: {
        paragraph: {
            'lead': {
                title: 'Lead',
                classname: 'lead'
            }
        },
        embed: {
            'frame': {
                title: 'Frame',
                classname: 'embed-frame'
            }
        }
    }
});

The keys paragraph and embed indicate for which block the style will be available. Here is the list of all blocks by default.

title - the name of the style in the dropdown.
classname — parameter indicates which CSS style will need to be applied for this block.

Then write the CSS styles in the file which you set in the custom.css setting.

In our example, it's: '/your-article-dist-path/your-style-plugin.css'

Here's an example of the styles written in this file:

/* paragraph */
.lead {
    font-size: 24px;
    color: #444;
}

/* embed */
.embed-frame {
    border: 20px solid #111;
}

Style

Code

Usage