IE 6-8 fix for this function

[qwikad.com]

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>. Has something to do with range / length.

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);
})
});


**** 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;
}


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

[qwikad.com]

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();