Completed
Last Updated: 20 Dec 2013 11:51 by ADMIN
ADMIN
Ianko
Created on: 13 Dec 2013 09:17
Category: Editor
Type: Bug Report
1
When selecting image or table in a wrapper element from the content area under IE11, the tools for their manipulation behave incorrectly
The problem is due to changes related to the selection object of the IE11 browser. Because of that the getSelectedElement() method retrieves wrong values. 

This issue causes incorrect behavior of the following features/methods:

   - The DOM inspector module shows incorrect value;
   - The Image Properties dialog opens with blank attributes;
   - The Image Map Editor dialog alerts that image is not selected;
   - The getSelectedElement() method retrieves incorrect value;
   - When a table is selected, an incorrect alert message is being thrown on opening the Table Properties dialog from the context menu.

Possible resolution is to use the following example setup with the function that overrides the original Selection prototype:

<telerik:RadEditor runat="server" ID="RadEditor1">
</telerik:RadEditor>

<script type="text/javascript">
    Telerik.Web.UI.Editor.Selection.prototype.getParentElement = function () {
        var rng = this.getRange();
        if (!rng) return null;

        //IE
        if (rng.commonAncestorContainer)//MOZ, Safari, Opera
        {
            var theSelection = this._window.getSelection();


            //Safari!
            var startContainer = rng.startContainer ? rng.startContainer : theSelection.baseNode;
            var endContainer = rng.endContainer ? rng.endContainer : theSelection.extentNode;
            var startOffset = rng.startOffset != null ? rng.startOffset : theSelection.baseOffset;
            var endOffset = rng.endOffset != null ? rng.endOffset : theSelection.extentOffset;

            var anchorOffsetChild = theSelection.anchorNode.childNodes[theSelection.anchorOffset];

            if (anchorOffsetChild && (anchorOffsetChild.nodeName == "IMG" || (startContainer == endContainer && (endOffset - startOffset) == 1))) {
                return anchorOffsetChild;
            }
            else {
                if ($telerik.isSafari) // new fix context menu in Safari and Chrome
                {
                    var tagName = (theSelection.anchorNode && theSelection.anchorNode.parentNode) ? theSelection.anchorNode.parentNode.tagName : "";
                    if (tagName == "TH" || tagName == "TD") {
                        return theSelection.anchorNode.parentNode;
                    }
                    else if (tagName == "TR") {
                        return theSelection.anchorNode;
                    }
                }

                if (!rng.commonAncestorContainer.tagName) {
                    if (this._window.document == rng.commonAncestorContainer && theSelection.baseNode)//SAFARI
                    {
                        return theSelection.baseNode.parentNode;
                    }
                    return rng.commonAncestorContainer.parentNode;
                }
                else {
                    // Workaround for issue related to the retrieved
                    // Image element under IE11
                   if (rng.commonAncestorContainer.firstElementChild
                                && (rng.commonAncestorContainer.firstElementChild.tagName === "IMG"
                                || rng.commonAncestorContainer.firstElementChild.tagName === "TABLE")) {
                                return rng.commonAncestorContainer.firstElementChild
                            }

                    return rng.commonAncestorContainer;
                }
            }
        }
        else if (rng.length) {
            return rng.item(0);
        }
        else if (rng.parentElement) {
            return rng.parentElement();
        }
        else {
            return null;
        }
    };
</script>

Note that the script tag should be placed right after the RadEditor declaration.
0 comments