Add control button

This example shows how to add a button to the control bar. Click on any block to see the button. See more about Button API.


<!DOCTYPE html>
    <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="">
    <!-- element -->
    <textarea id="entry">

    <!-- js -->
    <script src="/your-article-dist-path/article-editor.min.js"></script>

    <!-- call -->
    // Create a plugin
    ArticleEditor.add('plugin', 'myplugin', {
        start: function() {
  'mybutton', {
                title: 'My Button',
                icon: '<i class="fa fa-compass"></i>',
                command: 'myplugin.toggle'
        toggle: function(params, button) {
            alert('Button Toggle');

    // Call with plugin
    ArticleEditor('#entry', {
        css: '/your-article-dist-path/',
        plugins: ['myplugin']


In the example, the button is added as HTML, you can also add it as svg:'mybutton', {
    title: 'My Button',
    icon: '<svg>...</svg>',
    command: 'myplugin.toggle'