Using Textbox.io -custom styles dropdown
HTML
<script src="http://fonts.googleapis.com/css?family=Lato:400,900italic|Arvo:400,700,400italic|Ubuntu|Josefin+Slab"></script>
<script src="http://jsfiddle.net/textboxio/4y98k8ny/"></script>
<script src="https://s3.amazonaws.com/static.ephox.com/jsfiddle/textboxio/textboxio.js"></script>
<form>
<textarea id="mytextarea"></textarea>
</form>
CSS
#mytextarea {
margin:10px;
height:200px;
}
.ephox-polish-editor-container .ephox-chameleon-toolstrip {
background-color: #ffff !important; // I am not sure if you will need !important
}
.ephox-polish-editor-container .ephox-chameleon-toolbar:first-child {
box-shadow: inset 0 -.5em 1em #536872 !important; // I am not sure if you will need !important
}
JavaScript
textboxio.replace('#mytextarea',{
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', 'language']
}
}
});alert(ed.content.get());
});