Using Textbox.io - dynamic style 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>
<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>

CSS

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

JavaScript

const configCSS = {
    css : {
        showDocumentStyles: true,
        styles : [],
        documentStyles: `
@import url(https://fonts.googleapis.com/css?family=Lato:100,400,700,900|Josefin+Slab:100,400,700);
h1.title {
  color: green;
  font-family: 'Josefin Slab';
  font-size:3.5em;
  font-weight:normal;
}

h1.title[ephox-data] {
  visibility: visible;
  content: 'Fancy Title'
}

/* This rule will be shown */
.dignified {
  font-family: 'Lato';
  font-size: 2em;
  font-weight: 700;
}

.dignified[ephox-data] {
  content: 'Dignified'
}

p.dropcaps:first-letter {
  float: left; color: #903; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia;
}
/* This ensures it will be hidden even though showDocumentStyles is true */
p.dropcaps[ephox-data]:first-letter {
  visibility: hidden;
}
`,
    }
};


const ed = textboxio.replace('#editableDiv', configCSS);
$('#getContent').click(() => alert(ed.content.get()));