Inline Format

The Inline Format plugin allows to markup the selected text with inline tags and also remove the format in the text.

    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>Article Editor</title>
            <meta charset="utf-8">
    
            <!-- css -->
            <link rel="stylesheet" href="/your-article-dist-path/article-editor.css" />
        </head>
        <body>
            <!-- element -->
            <textarea id="entry">...</textarea>
    
            <!-- js -->
            <script src="/your-article-dist-path/article-editor.js"></script>
            <script src="/your-article-dist-path/plugins/inlineformat.js"></script>
    
            <!-- call -->
            <script>
            ArticleEditor('#entry', {
                plugins: ['inlineformat'],
                css: '/your-article-dist-path/'
            });
            </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:

    ArticleEditor('#entry', {
        plugins: ['inlineformat'],
        css: '/your-article-dist-path/',
        inlineformat: {
            items: ['sup', 'sub', 'mark', 'code']
        }
    });
    

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

    ArticleEditor('#entry', {
        plugins: ['inlineformat'],
        css: '/your-article-dist-path/',
        custom: {
            css: [
                '/your-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'
                    }
                }
            }
        }
    });
    

    To display the format style in the Article, specify the path to the style file. The file may look like this:

    // custom-inline-format.css
    .redspan {
        display: inline-block;
        color: #fff;
        background: #ff3265;
        padding: 2px 8px;
        border-radius: 3px;
    }
    .boldmark {
        color: #ff3265;
    }