Using Textbox.io - macros

by textboxio

HTML

<script src="http://static.ephox.com/jsfiddle/textboxio/textboxio.js"></script>
<link href="http://fonts.googleapis.com/css?family=Lato:400,900italic|Arvo:400,700,400italic|Ubuntu|Josefin+Slab" type="text/css"></link>
<div id="editableDiv">
    <h1> Macro Demo </h1>
    <p> Make your text red using Make your text red usingMake your text red usingMake your text red usingMake your text red usingMake your text red usingMake your text red usingMake your text red </p>
</div>
<button id="getContent">Get content</button>

CSS

div {
    margin:10px 0;
}

JavaScript

var configCSS = {
    css : {
        stylesheets : ['http://localhost/custom.css'],
        styles : [
            { rule : 'p' },
            { rule : 'h1.blue', text: 'Blue Heading 1', style: {color: 'blue'}},
            { rule : '.green', text: 'Green Inline Style', style:{color: 'green'} },
            { rule : 'p.onceuponatime' 
        ]
    }
};


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