Using Textbox.io - macros

by textboxio

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('[red]', '[/red]', function(match){
    return '<span style="color: red">' + match + '</span>'
});