Using Textbox.io - complete example

HTML

<script src="https://s3.amazonaws.com/ephox-static-ephox-com/jsfiddle/textboxio/textboxio.js"></script>
<div id="editableDiv">
    <h1> dssdsDynamic content </h1>
    <p> Type something between &quot;[[&quot; and &quot;]]&quot;, then hit space.</p>
    <p> E.g. &quot;[[date]]&quot; or &quot;[[LOL]]&quot;
</div>
<button id="getContent">Get content</button>

CSS

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

JavaScript

var replacements = {
    "LOL" : "Laugh out Loudly",
    "ROFL" : "Rolling on the floor Laughing",
    "date" : new Date().toString()
}


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

/*
 * create a macro that replaces a matched string between square braces, and attempts 
 * to replace it
 */
ed.macros.addSimpleMacro('[[', ']]', function(match){
    if (replacements[match] != null){
       // find a replacement, then return it's replacement in a span,
       // keeping the original value as an attribute, data-orginal-value
       return '<span class="replacement" data-original-value="' + escape(match) + '">' + replacements[match] + '</span>';
    }else{
        //just return the orginal
        return '[[' + match + ']]';
    }
});


/*
 * Create an output filter to restore the macro replacement with its original 
 * value
 */ 
ed.filters.selector.addOutput('span.replacement', function(elements) {
    elements.forEach(function (el) {
        var originalValue = $(el).attr('data-original-value');
        $(el).replaceWith(document.createTextNode('[[' + originalValue + ']]'));
    });
});


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