Documentation

Inline Formatting

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

<!DOCTYPE html>
<html>
<head>
    <title>Article Editor</title>
    <meta charset="utf-8">

    <!-- css -->
    <link rel="stylesheet" href="/your-folder/article-editor.min.css" />

    <!-- inline styles -->
    <style>
    .arx-content .redmark {
        display: inline-block;
        color: #fff;
        background: #ff3265;
        padding: 2px 8px;
        border-radius: 3px;
    }
    .arx-content .boldmark {
        color: #ff3265;
    }
    </style>
</head>
<body>
    <!-- element -->
    <textarea id="entry">...</textarea>

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

    <!-- call -->
    <script>
    ArticleEditor('#entry', {
        inline: {
            "bold": {
                title: '<span style="font-weight: bold;">## inline.bold ##</span>',
                command: 'inline.format',
                params: { tag: 'b' }
            },
            "italic": {
                title: '<span style="font-style: italic;">## inline.italic ##</span>',
                command: 'inline.format',
                params: { tag: 'i' }
            },
            "redmark": {
                title: '<span style="color: #fff; background: #ff3265; padding: 2px 8px; border-radius: 3px;">Redmark</span>',
                command: 'inline.format',
                params: {
                    tag: 'span',
                    attr: {
                        'class': 'redmark'
                    }
                }
            },
            "boldmark": {
                title: '<b style="color: #ff3265;">Boldmark</b>',
                command: 'inline.format',
                params: {
                    tag: 'b',
                    attr: {
                        'class': 'boldmark',
                        'data-type': 'boldmark'
                    }
                }
            },
            "deleted": {
                title: '<span style="text-decoration: line-through;">## inline.deleted ##</span>',
                command: 'inline.format',
                params: { tag: 'del' }
            }

        }
    });
    </script>
</body>
</html>