Using Textbox.io - Customizing the toolbar

HTML

<script src="https://s3.amazonaws.com/static.ephox.com/jsfiddle/textboxio/textboxio.js"></script>
<div id="editableDiv" class="ui-widget-content">
  <p>This is the Editor content</p>
  <div id="container">
    <span id="draggable">*  
      <input type="text "id="resizable" class="ui-state-active" value="This is input box">
    </span>
  </div>
</div>

CSS

#editableDiv {
    margin:10px 0;
    height:250px;
}

JavaScript

// Create a Textbox.io Editor for the matched element(s)
textboxio.replace('#editableDiv',{
    ui: {
        toolbar: {
            // Define which items you'd like in the toolbar here,  and their
            // ordering. See http://docs.ephox.com/display/tbio/Command+Item+IDs 
            // for a list of available commands
            items: ['undo', 'insert', 'style', 'emphasis', 'align', 'listindent', 'format', 'tools']
        }
    }
});

 $(function() {
     $( "#resizable" ).resizable({
containment: "#container"
});
     $( "#draggable" ).draggable({containment: "#container"});
});