Using Textbox.io -custom styles dropdown

by textboxio

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/ephox-static-ephox-com/jsfiddle/textboxio/textboxio.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lato" type="text/css"/>
<div id="editableDiv">
    <h1 class="title"> Custom styles demo </h1>
<p class="dropcaps">The content created by
users is the lifeblood of any lively community. Yet, without user adoption
there is no content – and thus no community. </p>
<p>Enter Ephox’s Textbox.io,
an Editor built to drive user adoption and remove the barriers to effective collaboration.
It’s a rich text editor that includes all the functionality and none of the
frustration.</p>
<p>Whether you’re creating
content in wikis, blogs, profiles, forums or activities, Ephox’s
Next-Generation Editor provides clean copy and paste including embedded images;
enhances content with easy media embeds; and adds spell checking as you type
even for Internet Explorer users</p>
</div>
<button id="getContent">Get content</button><a href="http://static.ephox.com/jsfiddle/examples/css/customstyles.css" target="_blank"> See custom styles CSS </a>

CSS

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

JavaScript

var configCSS = {
    css : {
        stylesheets : ['https://ephox-static-ephox-com.s3.amazonaws.com/jsfiddle/examples/css/customstyles.css'],
        styles : [
            { rule : 'p' },
            { rule : 'h1.title', text: 'Fancy Title'},
            { rule : '.dignified', text: 'Dignified'},
            { rule : 'p.dropcaps', text: 'Drop Caps'}
        ]
    }
};


var ed = textboxio.replace('#editableDiv', configCSS);
$('#getContent').click(function(){
    alert(ed.content.get());
});