Using Textbox.io - dynamic style 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/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,
documentStyles: `
ol.normal {
}
ol.normal li {
}
ol.normal[ephox-data] {
content: 'Normal list';
}
ol.small-list {
}
ol.small-list li {
font-size: 10px;
}
ol.small-list[ephox-data] {
content: 'Small list';
}
ol.medium-list {
}
ol.medium-list li {
font-size: 20px;
}
ol.medium-list[ephox-data] {
content: 'Medium list';
}
ol.big-list {
}
ol.big-list li {
font-size: 30px;
}
ol.big-list[ephox-data] {
content: 'Big list';
}
`,
}
};
const ed = textboxio.replace('#editableDiv', configCSS);
$('#getContent').click(() => alert(ed.content.get()));