Using Textbox.io - macros

HTML

<script src="https://s3.amazonaws.com/ephox-static-ephox-com/jsfiddle/textboxio/textboxio.js"></script>
<div id="editableDiv">
    <h1> Macro Demo </h1>
    <p> Make your text red by typing [red] the text you wish to make red, then [/red]. Then press space or enter. </p>
</div>
<button id="getContent">Get content</button>

CSS

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

JavaScript

var ed = textboxio.replace('#editableDiv');

/*
 * create a macro that replaces a matched string between square braces, and attempts 
 * to replace it
 */
ed.macros.addSimpleMacro('font-family:', ';', function(match){
    return  match 
});