Ignite UI jQuery Editor with output template

Adding additional option for output template (not the same as mask, doesn't take part in actual editing) and overriding value method to to format the output

HTML

<script src="http://igniteui.com/js/modernizr.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="http://cdn-na.infragistics.com/jquery/20132/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/jquery/20132/latest/js/infragistics.lob.js"></script>
<link href="http://cdn-na.infragistics.com/jquery/20132/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="http://cdn-na.infragistics.com/jquery/20132/latest/css/structure/infragistics.css" rel="stylesheet"></link>
<div id="editorContainer">

    <div id="editor"></div>
    
    <br>
    <button id="getValue"> Get templated value </button>
    <p id="value"> </p>
</div>

CSS

#editorContainer h4 {
    margin-bottom: .5em;
}

JavaScript

$(function () {
    var originalValue = $.ui.igTextEditor.prototype.value;
    $.widget("ui.igTextEditor", $.extend({}, $.ui.igTextEditor.prototype, {
        value: function () {
            if ((val = originalValue.apply(this, arguments))) {
                return this.options.outputTemplate.replace("{0}", val);
            }
            return val;
        }
    }));
    
    $("#editor").igTextEditor({
        width: 200,
        outputTemplate: "TEL;HOME;VOICE:{0}\r\n"
    });
    
     $("#getValue").on("click", function(){
			$("#editor").igTextEditor("readonly") = true;      
    });
});