Button link

This plugin adds a styling item to the link dropdown to make it look like a button.

Download

Click the 'Button' link in the text and then the 'Link' 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/buttonlink.js"></script>

        <!-- call -->
        <script>
        ArticleEditor('#entry', {
            plugins: ['buttonlink'],
            css: '/your-article-dist-path/',
            buttonlink: {
                classname: 'button button-primary'
            }
        });
        </script>
    </body>
</html>

Usage

The plugin adds an item to the link dropdown menu with specified classname in the settings:

buttonlink: {
    classname: 'button button-primary'
}

When you select 'Button' in the dropdown menu, the link gets the class or classes specified in the plugin setting.

Don't forget to make sure that your CSS for content has classes for button.