Make a button

The plugin creates a button on the toolbar with a dropdown list of styles for links as buttons.

Download

Click the 'Button' link in the text and select the 'Make a button' on the toolbar.

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/makebutton.js"></script>

        <!-- call -->
        <script>
        ArticleEditor('#entry', {
            plugins: ['makebutton'],
            css: '/your-article-dist-path/',
            makebutton: {
                items: {
                    primary: {
                        title: 'Default',
                        params: { classname: 'button' }
                    },
                    secondary: {
                        title: 'Primary',
                        params: { classname: 'button button-primary' }
                    }
                }
            }
        });
        </script>
    </body>
</html>

Usage

The plugin creates a dropdown menu from the items specified in the settings:

makebutton: {
    items: {
        primary: {
            title: 'Default',
            params: { classname: 'button' }
        },
        secondary: {
            title: 'Primary',
            params: { classname: 'button button-primary' }
        }
    }
}

When you select an item in the 'Make a button' dropdown menu, the link gets the class or classes specified in the item params.

Don't forget to make sure that your CSS for content contains classes for buttons specified in the plugin settings.