IE 6-8 fix for this function

I am working on a small function and it works fine in all browsers, however, in IE6 thru 8 the tags act funny. For instance if you click on Bold you will have <b></b>, then if you click on Bold the second time, instead of having another <b></b> you'll have <b></b><b><b></b></b><b></b>. Not sure why it's doing that.

Fiddle: http://jsfiddle.net/T2Q89/26/

Code:

$(document).ready(function() {
    $('#btnedit-bold').on("click",function(e) {
        wrapText('b');
    });

    $('#btnedit-italic').on("click",function(e) {
        wrapText('i');
    });

    $('#btnedit-underline').on("click",function(e) {
        wrapText('u');
    });

    $('#btnedit-delete').on("click",function(e) {
        wrapText('del');
    });

    $('#btnedit-link').on("click",function(e) {
        var textArea = $('.area'),
            len = textArea.val().length,
            start = textArea[0].selectionStart,
            end = textArea[0].selectionEnd,
            selectedText = textArea.val().substring(start, end);
        $('#btnedit-title').val(selectedText);
        $('#btnedit-url').val('http://');
        $('#prompt').show();
    });

    $('#btnedit-ok').on("click",function(e) {
        e.preventDefault();
        $('#prompt').hide();
       replacement = '<a title="'+$('#btnedit-title').val()+'" href="'+$('#btnedit-url').val()+'" rel="external">' + $('#btnedit-title').val() + '</a>';
        wrapLink(replacement);
    });

    $('#btnedit-cancel').on("click",function(e) {
        e.preventDefault();
        $('#prompt').hide();
    });
});

function wrapLink(link) {
    var textArea = $('.area'),
        len = textArea.val().length,
        start = textArea[0].selectionStart,
        end = textArea[0].selectionEnd,
        selectedText = textArea.val().substring(start, end);
    textArea.val(textArea.val().substring(0, start) + link + textArea.val().substring(end, len));
    $('.area').keyup();
}


function wrapText(tag) {
    var textArea = $('.area'),
        len = textArea.val().length,
        start = textArea[0].selectionStart,
        end = textArea[0].selectionEnd,
        selectedText = textArea.val().substring(start, end),
        replacement = '<' + tag + '>' + selectedText + '</' + tag + '>';
    textArea.val(textArea.val().substring(0, start) + replacement + textArea.val().substring(end, len));
    $('.area').keyup();
}

$(function() {
    $('.area').keyup(function(){                
        var value = $(this).val();
        var contentAttr = $(this).attr( 'name' );
        $( '.' + contentAttr + '' ).html(value);
    })
});

Code (markup):

**** By the way I do realize jsfiddle doesn't work in those browsers, but I am able to test that script on my site and that's how I know it's doing that weird thing in IE6-8.

**** In javascript the IE6-8 fix would look something like:

var element = document.getElementByClassName( 'area' );
if( document.selection ){
var range = document.selection.createRange();
var stored_range = range.duplicate();
stored_range.moveToElementText( element );
stored_range.setEndPoint( 'EndToEnd', range );
element.selectionStart = stored_range.text.length - range.text.length;
element.selectionEnd = element.selectionStart + range.text.length;
}

Code (markup):

Now how do I implement something similar in that particular jquery code?

 

I am close to figuring this out. This took care of the issue, but it now places the cursor in front of a new set of tags (ie <b></b>). I need it to be placed between the tags. What needs to be done? I tried a couple things nothing worked.

   
    var textArea = $('.area').get(0);
    var len = textArea.value.length;
    textArea.selectionStart = len;
    textArea.selectionEnd = len;
    textArea.focus();

Code (markup):