inline toolbar visibility

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="editable_region">
    <h1>Toolbar Visibility</h1>
    
</div>

<div class="article">
  <p>Click this region. Still the same great editor features, but without the toolbar UI!</p>
</div>

CSS

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

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

#editable_region{
    margin-top: 5em;
    color: white;
    font-weight: 400;
}

#editable_region p{
    font-family: 'Helvetica Neue';
}

#editable_region h1{
    text-transform: uppercase;
    font-family: 'Lato';
    font-size: 5em;
}

div.article {
    font-family: 'Helvetica Neue';
    color: white;
    font-weight: 200;
}

JavaScript

var configInvisible = {
    ui: {
        toolbar: {
            visible: true
        }
    }
};

textboxio.inline('.article', configInvisible); //note: here we've stated not to make the toolbar visible