Using Textbox.io - editor styles
HTML
<link rel="stylesheet" href="https://s3.amazonaws.com/static.ephox.com/jsfiddle/examples/css/lato.css">
<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> <b>Lato</b> typeface </h1>
<p> Lato is a sans-serif typeface family designed in the Summer of 2010 by Lukasz Dziedzic </p>
</div>
<button id="getContent">Get content</button>
<a href="http://static.ephox.com/jsfiddle/examples/css/lato.css" target="_blank">View the custom 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/lato.css'],
}
};
var ed = textboxio.replace('#editableDiv', configCSS);
$('#getContent').click(function(){
alert(ed.content.get());
});