JavaScript: how to adapt working function (IE) for Firefox and/or Chrome

Question

I am using the following function to get the selected text range within a contenteditable div. This works fine in IE but not in Firefox and Chrome.

Can anyone tell me how I would need to adjust this so that it works in either both FF and Chrome or at least one of them (besides IE) ? It it would work in current versions there that would be enough. The idea with this is to replace the selected text through another function that gets the "selTxt" from here.

The function to get the selection (working in IE):

function GetSelection() 
{
selTxt = '';

if (typeof window.getSelection != "undefined") 
{
    var sel = window.getSelection();
    if (sel.rangeCount) 
    {
        var container = document.createElement('div');
        for (var i = 0, len = sel.rangeCount; i < len; ++i) 
        {
            container.appendChild(sel.getRangeAt(i).cloneContents());
        }
        selTxt = container.innerHTML;
    }
} 
else if (typeof document.selection != 'undefined') 
{
    if (document.selection.type == 'Text') 
    {
        selTxt = document.selection.createRange().htmlText;
    }
}
return selTxt;
}

The function to replace the selection (this seems to be the issue):

function EditBold()
{
    var newTxt = '';
    btnID = 'btnBold';

    GetSelection();     

    if (selTxt.toLowerCase().indexOf('<strong>') == -1)
    {
        document.selection.createRange().pasteHTML("<strong>" + selTxt + "</strong>");
    }
}

Many thanks for any help with this, Tim.

What are you seeing when running this code in FF and Chrome? The `window.getSelection()` is supported by both FF and Chrome. — T.V., Nov 14 '13 at 17:27
Thanks for the answer. When testing it in FF and Chrome it looks like it doesnt do anything but also doesnt give me an error. — user2571510, Nov 14 '13 at 17:41
Update: I think I found the issue. This is not in the function that gets the selection but in the function that uses it. I will add this above. — user2571510, Nov 14 '13 at 17:45

score 1 · Accepted Answer · answered Nov 14 '13 at 17:58

1

You use a variable selTxt in the EditBold() function, but don't have it declared inside the function. If the value is supposed to be what is returned by GetSelection(), use the following:

var selTxt = GetSelection();

answered Nov 14 '13 at 17:58

Matthew Johnson

4,875
2
38
51

1

While using `var` should be done, I think referencing `selTxt` will still work because `selTxt = '';` from `GetSelection()` is going to set a global variable on `window`, which will be accessible in `EditBold()`. Use of a global variable like that is, of course, bad practice. – ajp15243 Nov 14 '13 at 18:01
Thanks for the notes on that. This is declared as a global variable outside these functions which is why i didnt paste it here. – user2571510 Nov 14 '13 at 18:08
I also checked on using the variable as you suggested but this doesnt make a difference in FF and Chrome. – user2571510 Nov 14 '13 at 18:12
1

the offending line is `document.selection.createRange().pasteHTML` I don't think that is even supported in FF or Chrome – T.V. Nov 14 '13 at 18:16
2

Check this [answer](http://stackoverflow.com/questions/7003784/does-chrome-supports-document-selection). Try it with `document.getSelection().createRange().pasteHTML` – Matthew Johnson Nov 14 '13 at 18:17
Can confirm. `document.selection` is `undefined` in Chrome, but [`document.getSelection()`](https://developer.mozilla.org/en-US/docs/Web/API/window.getSelection) returns a [`Selection`](https://developer.mozilla.org/en-US/docs/Web/API/Selection) object. – ajp15243 Nov 14 '13 at 18:19
1

Thanks a lot, Matthew - that's the missing piece ! Works perfect for me ! – user2571510 Nov 14 '13 at 18:33

JavaScript: how to adapt working function (IE) for Firefox and/or Chrome

1 Answers1