Using Textbox.io -Toolbar custom commands

by textboxio

HTML

<script src="http://static.ephox.com/jsfiddle/textboxio/textboxio.js"></script>
<div id="editableDiv">
    <p>This is the Editor content</p>
</div>

CSS

div {
    margin:10px 0;
}

JavaScript

var customCommand = {
    id : 'myCommand',
    text : 'my custom command', 
    action : function () {
        alert('hello world');
        // write custom functionality to occur when the button is clicked here.
    }
};


textboxio.replace('#editableDiv',{
    ui: {
        toolbar: {
            // groups can be defined inline as part of the toolbar items
            items: ['undo','insert', 'style', 'emphasis', 'align', 'listindent', 'format', 'tools', // other toolbar items
                    {
                        label: 'Custom commands group',
                        items: [customCommand]
                    }
            ]
        }
    }
});