Documentation

Add a button to the toolbar

This example shows how to add a button to the toolbar. Just click on any block to see the button

<!DOCTYPE html>
<html>
<head>
    <title>Article Editor</title>
    <meta charset="utf-8">

    <!-- css -->
    <link rel="stylesheet" href="/your-folder/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-folder/article-editor.min.js"></script>

    <!-- call -->
    <script>
    // Create a plugin
    (function() {
        ArticleEditor.add('plugin', 'myplugin', {
            start: function() {
                this.app.toolbar.add('mybutton', {
                    title: 'My Button',
                    icon: '<i class="far fa-file-alt"></i>',
                    command: 'myplugin.toggle'
                });
            },
            toggle: function(e, $el, params) {
                alert('Button Toggle');
            }
        });
    })(ArticleEditor);

    // Call with plugin
    ArticleEditor('#entry', {
        plugins: ['myplugin']
    });
    </script>
</body>
</html>