Menu

Examples

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.

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