Using Textbox.io - macros

HTML

<script src="https://s3.amazonaws.com/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');

/* Our filter function. This gets executed with a list of elements that match
 * our selector
 */
var makeRed = function (elements) {
 elements.forEach(function (el) {
        // use jQuery to make the element red
        $(el).css({color:'red'});
 });
};

// execute the function for all h1 tags. You can use any Jquery-style selector as 
// the first argument
ed.filters.selector.addInput('h1', makeRed); 

// Test it by setting some content that contains 'h1' tags.
ed.content.set('<h1> this is my heading</h1><p>and this is a paragraph</p>');

$("#getContent").click(function(){
alert(ed.content.get();)
});