custom toolbar

by textboxio

HTML

<script src="http://fonts.googleapis.com/css?family=Lato"></script>
<script src="http://static.ephox.com/jsfiddle/textboxio1-1/textboxio.js"></script>

<div id="targetId">
  <p>Editor</p>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Lato:100,400,700,900);

body{
   background-color: rgb(167, 12,232);
   
}

JavaScript

var customToolbar = {
    items : [
        {
            label: 'Undo and Redo group',
            items: [ 'undo', 'redo' ]
        },
        {
            label: 'Insert group',
            items: [
                {
                    id    : 'insert',
                    label  : 'Insert Menu',
                    items : [ 'link', 'fileupload', 'table' ]
                }
            ]
        }, 
        {
            label: 'Custom Toolbar Group',
            items: [
                {
                    id     : 'custom1',
                    text   : 'Custom Button 1',
                    icon   : '/path/to/icon1.png',
                    action : function () { alert('Custom Button 1 Clicked'); }
                },
                {
                    id     : 'custom2',
                    text   : 'Custom Button 2',
                    icon   : '/path/to/icon2.png',
                    action : function () { alert('Custom Button 2 Clicked'); }
                }
            ]
        }
    ]
};
 
var config = {
    ui : { toolbar : customToolbar }
};
 
var editor = textboxio.replace('#targetId', config);