Inline format

Apply inline formatting to style text using dropdown.

    Demo

    Select any text in a paragraph and click the drop icon on the toolbar, it will show the inline format dropdown.

    Code

    <!DOCTYPE html>
    <html>
        <head>
            <title>Redactor X</title>
            <meta charset="utf-8">
    
            <!-- css -->
            <link rel="stylesheet" href="/your-folder/redactorx.css" />
        </head>
        <body>
            <!-- element -->
            <textarea id="entry">...</textarea>
    
            <!-- js -->
            <script src="/your-folder/redactorx.js"></script>
            <script src="/your-folder/plugins/inlineformat.js"></script>
    
            <!-- call -->
            <script>
            RedactorX('#entry', {
                plugins: ['inlineformat']
            });
            </script>
        </body>
    </html>

    Usage

    By default, the inline plugin contains this array of tags:

    ['u', 'sup', 'sub', 'mark', 'code', 'kbd']

    You can change it like this:

    RedactorX('#entry', {
        plugins: ['inlineformat'],
        inlineformat: {
            items: ['sup', 'sub', 'mark', 'code']
        }
    });
    

    Or add your own formats with CSS class for styles and any attributes:

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

    You also need to add styles for the editable layer, so that the styles of inline format items are applied in the editor view.

    .rx-content .redspan {
        display: inline-block;
        color: #fff;
        background: #ff3265;
        padding: 2px 8px;
        border-radius: 3px;
    }
    .rx-content .boldmark {
        color: #ff3265;
    }