Menu

Examples

Inline formatting

This example shows how to add your custom inline formatting with classes and attributes using Inline Format plugin. To show it in action, select some text and click to the drop icon on the toolbar then apply "Redmark" or "Boldmark" inline formatting.

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', {
        plugins: ['inlineformat'],
        css: '/your-article-dist-path/',
        custom: {
            css: [
                '/your-article-dist-path/custom-inline-format.css'
            ]
        },
        inlineformat: {
            items: ['u', 'sup', 'sub', 'mark', 'code', 'kbd', 'redspan', 'boldmark'],
            itemsObj: {
                "redspan": {
                    title: '<span style="color: #fff; background: #ff3265; padding: 2px 8px; border-radius: 3px;">Redmark</span>',
                    params: {
                        tag: 'span',
                        attr: {
                            'class': 'redspan'
                        }
                    }
                },
                "boldmark": {
                    title: '<b style="color: #ff3265;">Boldmark</b>',
                    params: {
                        tag: 'b',
                        attr: {
                            'class': 'boldmark',
                            'data-type': 'my-mark'
                        }
                    }
                }
            }
        }
    });
    </script>
</body>
</html>