textarea manager plugin

by Yuval Bar-On

HTML

<div class="controls">
    <button val="[[p]]">Add "P" Element</button>
    <button val="[[x]]">Add "X" Element</button>
    <button val="<span class='ohfun'>{0}</span>">Add Fun</button>
    <button val="<b>{0}</b>">boldify</button>
</div>
<!-- <textarea name="textarea" id="textarea" cols="30" rows="10"></textarea> -->
<div contenteditable="true" id="textarea"></div>

CSS

* {
    font-family: Ubuntu, sans-serif;
}
button {
    background-color: white;
    border: 1px solid #c1c1c1;
    margin: 8px 0;
}
button:hover {
    cursor: pointer;
    background-color: #ddd;
}
#textarea {
    height: 300px;
    width: 420px;
    border: 2px solid #ddd;
    border-radius: 3px;
    padding: 5px;
}

.ohfun {
    background-color: black;
    border-radius: 8px;
    color: white;
    padding: 5px;
}

JavaScript

if (!String.prototype.format) {
    String.prototype.format = function () {
        var args = arguments;
        return this.replace(/{(\d+)}/g, function (match, number) {
            return typeof args[number] != 'undefined' ? args[number] : match;
        });
    };
}


var TextAreaManager = function (element) {
    this.el = element;
};

$.extend(TextAreaManager.prototype, {
    getCaret: function () {
        if (this.el.prop("selectionStart")) {
            return this.el.prop("selectionStart");
        } else if (document.selection) {
            this.el.focus();

            var r = document.selection.createRange();
            if (r == null) {
                return 0;
            }

            var re = this.el.createTextRange(),
                rc = re.duplicate();
            re.moveToBookmark(r.getBookmark());
            rc.setEndPoint('EndToStart', re);

            return rc.text.length;
        }
        return 0;
    },

    appendAtCaret: function ($value) {
        var caret = this.getCaret(),
            $target = $(this.el),
            value = $target.val();

        if (caret != value.length) {
            var startPos = $target.prop("selectionStart");
            var scrollTop = $target.scrollTop;
            $target.val(value.substring(0, caret) + ' ' + $value + ' ' + value.substring(caret, value.length));
            $target.prop("selectionStart", startPos + $value.length + 1);
            $target.prop("selectionEnd", startPos + $value.length + 1);
            $target.scrollTop = scrollTop;
        } else if (caret == 0) {
            $target.val($value + ' ' + value);
        } else {
            $target.val(value + ' ' + $value);
        }

        this.el.focus();
    },

    insertTextAtCursor: function (text) {
        var sel, range, html;
        var el = this.el[0];
        if (window.getSelection) {
            sel = window.getSelection();
            if (sel.getRangeAt && sel.rangeCount) {
                range =...