Using Textbox.io - macros

HTML

<script src="https://s3.amazonaws.com/static.ephox.com/jsfiddle/textboxio/textboxio.js"></script>
<div id="editableDiv">
  <h1> Chanel Macro Demo </h1>
</div>
<div>
  <button id="getContent">Get content</button>
</div>
<div>
  <textarea id="outputContent"></textarea>
</div

CSS

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

#outputContent {
  width: 100%;
  height: 100px;
}

JavaScript

var config = {
		autosubmit: true,
    css : {
        stylesheets : [''],
        styles : [               
            { rule: 'p.p-novel',    text: 'P Novel' },
            { rule: 'p.p-novella',  text: 'P Novella' },
            { rule: 'h1',   text: 'H1' },
            { rule: 'h2',   text: 'H2' },
            { rule: 'h3',   text: 'H3' },
            { rule: 'h4',   text: 'H4' },
            { rule: 'div',  text: 'block.div' },
            { rule: 'pre',  text: 'block.pre' }
        ]
    },
    codeview : {
        enabled: true,
        showButton: true
    },
    images : {
        allowLocal : false
    },
    languages : ['en'],
    macros : {
        allowed : [ 'headings', 'lists', 'semantics', 'entities', 'hr', 'link' ]
    },
    ui : {
        toolbar :  {
            items : [ 'undo', 'insert', 'style', 'emphasis', 'align', 'listindent', 'format', 'tools' ]
        }
    }
};

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

// Wrap a matched string
ed.macros.addSimpleMacro('[btn]', '[/btn]', function (match) {
    return '<span style="color: red">' + match + '</span>'
});

$('#getContent').click(function(){
	document.getElementById('outputContent').innerText = ed.content.get();
});