Style

The Style plugin creates a dropdown list of predefined styles that can be applied to blocks.

    Demo

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

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