Menu

Examples

Format styles

This example shows how to add style items in format popup. See the formatAdd setting description for more details.

Click on any text block and choose style from the Format dropdown on the toolbar.

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">...</textarea>

    <!-- js -->
    <script src="/your-article-dist-path/article-editor.min.js"></script>

    <!-- call -->
    <script>
    ArticleEditor('#entry', {
        css: '/your-article-dist-path/',
        custom: {
            css: ['/your-article-dist-path/my-custom.css']
        },
        formatAdd: {
            "lead": {
                title: '<span style="font-size: 20px; color: #666">Lead</span>',
                type: 'paragraph',
                params: {
                    tag: 'p',
                    classname: 'lead'
                }
            },
            "small": {
                title: '<span style="font-size: 14px;">Small</span>',
                type: 'paragraph',
                params: {
                    tag: 'p',
                    classname: 'small'
                }
            },
            "note": {
                title: '<span style="padding: 6px 8px; background-color: #FEF2C3; color: #645F4A;">Note</span>',
                type: 'paragraph',
                params: {
                    tag: 'p',
                    classname: 'my-note'
                }
            },
            "redheading": {
                title: '<span style="color: #F93943; font-weight: bold; font-size: 16px;">Red Heading</span>',
                type: 'heading',
                params: {
                    tag: 'h2',
                    classname: 'red-heading'
                }
            }
        }
    });
    </script>
</body>
</html>

Usage

In the example Article gets the styles for formatAdd from the my-custom.css file, this is how it might look like: 

// my-custom.css
.my-note {
    background-color: #FEF2C3;
    color: #645F4A;
    padding: 24px 28px;
}
.red-heading {
    color: #F93943;
}