Textarea toggle selection tags with Javascript

I'm working on a BBcode editor, and was wondering how to toggle tags on selection using Javascript (similar to how the text editing menu works on StackOverflow).

Example:

Textarea

Lorem ipsum dolor sit amet.

If you select the text 'ipsum dolor' and click on the bold button, it'll become

Lorem [b]ipsum dolor[/b] sit amet.

If you click the bold button once again, it'll remove the tags.

Thanks!

You can get the selected text caret positions, set the caret and then insert your text:

TL;DS (Too long didn't scroll)

There's a TL;DR at the bottom.

Get Caret Positions

function getInputSelection(el) {
    var start = 0, end = 0, normalizedValue, range,
        textInputRange, len, endRange;

    if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") {
        start = el.selectionStart;
        end = el.selectionEnd;
    } else {
        range = document.selection.createRange();

        if (range && range.parentElement() == el) {
            len = el.value.length;
            normalizedValue = el.value.replace(/\r\n/g, "\n");

            // Create a working TextRange that lives only in the input
            textInputRange = el.createTextRange();
            textInputRange.moveToBookmark(range.getBookmark());

            // Check if the start and end of the selection are at the very end
            // of the input, since moveStart/moveEnd doesn't return what we want
            // in those cases
            endRange = el.createTextRange();
            endRange.collapse(false);

            if (textInputRange.compareEndPoints("StartToEnd", endRange) > -1) {
                start = end = len;
            } else {
                start = -textInputRange.moveStart("character", -len);
                start += normalizedValue.slice(0, start).split("\n").length - 1;

                if (textInputRange.compareEndPoints("EndToEnd", endRange) > -1) {
                    end = len;
                } else {
                    end = -textInputRange.moveEnd("character", -len);
                    end += normalizedValue.slice(0, end).split("\n").length - 1;
                }
            }
        }
    }

    return {
        start: start,
        end: end
    };
}

Set Caret Position

function setCaretPosition(elemId, caretPos) {
    var elem = document.getElementById(elemId);

    if(elem != null) {
        if(elem.createTextRange) {
            var range = elem.createTextRange();
            range.move('character', caretPos);
            range.select();
        }
        else {
            if(elem.selectionStart) {
                elem.focus();
                elem.setSelectionRange(caretPos, caretPos);
            }
            else
                elem.focus();
        }
    }
}

Insert Text

function insertTextAtCaret(el, text) {
    var pos = getSelectionBoundary(el, false);
    var newPos = pos + text.length;
    var val = el.value;
    el.value = val.slice(0, pos) + text + val.slice(pos);
    setSelection(el, newPos, newPos);
}

Do Your Inserting

var pos = getInputSelection($('#textboxID'));
setCaretPosition($('#textboxID'), pos.start);
insertTextAtCaret($('#textboxID'), '[b]');
setCaretPosition($('#textboxID'), pos.end);
insertTextAtCaret($('#textboxID'), '[/b]');

Then to undo it, just check the text selection when they click the button, and if its wrapped in the thing you clicked (eg [b]...[/b], when clicking the B button) then just remove that text from the textbox selection.