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.

    Demo

    Code

    <!DOCTYPE html>
    <html>
    <head>
        <title>Redactor X</title>
        <meta charset="utf-8">
    
        <!-- css -->
        <link rel="stylesheet" href="/your-dist-path/redactorx.min.css" />
    
        <!-- custom css -->
        <style>
        .rx-content .redspan {
            display: inline-block;
            color: #fff;
            background: #ff3265;
            padding: 2px 8px;
            border-radius: 3px;
        }
        .rx-content .boldmark {
            color: #ff3265;
        }
        </style>
    </head>
    <body>
        <!-- element -->
        <textarea id="entry">...</textarea>
    
        <!-- js -->
        <script src="/your-dist-path/redactorx.min.js"></script>
        <script src="/your-dist-path/plugins/inlineformat.js"></script>
    
    
        <!-- call -->
        <script>
        RedactorX('#entry', {
            plugins: ['inlineformat'],
            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>