Add addbar button

This example shows how to add a button to the addbar. Click the add button on the toolbar and in the popup that opens you will see the added button from this example. See more about Button API.

    Demo

    Code

    <!DOCTYPE html>
    <html>
    <head>
        <title>Article Editor</title>
        <meta charset="utf-8">
    
        <!-- css -->
        <link rel="stylesheet" href="/your-article-dist-path/article-editor.min.css" />
    
        <!-- font awesome -->
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
    </head>
    <body>
        <!-- element -->
        <textarea id="entry">
            <p>Content</p>
        </textarea>
    
        <!-- js -->
        <script src="/your-article-dist-path/article-editor.min.js"></script>
    
        <!-- call -->
        <script>
        // Create a plugin
        ArticleEditor.add('plugin', 'myplugin', {
            start: function() {
                this.app.addbar.add('mybutton', {
                    title: 'My Button',
                    icon: '<i class="far fa-compass"></i>',
                    command: 'myplugin.toggle'
                });
            },
            toggle: function(params, button) {
                this.app.popup.close();
                alert('Button Toggle');
            }
        });
    
        // Call with plugin
        ArticleEditor('#entry', {
            css: '/your-article-dist-path/',
            plugins: ['myplugin']
        });
        </script>
    </body>
    </html>

    Usage

    In the example, the button is added as HTML, you can also add it as svg:

    this.app.addbar.add('mybutton', {
        title: 'My Button',
        icon: '<svg>...</svg>',
        command: 'myplugin.toggle'
    });