Right-clicking image map causing Chrome to crash

[Trevor]

One of our customers has reported a problem right-clicking an image map in the editor using Chrome.

The problem can be reproduced using the Telerik demo editor.

A video of the problem can be seen here: http://screencast.com/t/XPQddg04leNb


Steps to reproduce the problem:


1. using Chrome, go to the Telerik demo editor:  http://demos.telerik.com/aspnet-ajax/editor/examples/overview/defaultvb.aspx

2. switch to Html mode, delete the existing html, paste in the following html:

<img src="../../Img/editor.jpg" alt="product logo" style="margin-top: 25px; float: left; margin-right: 15px; border-width: 0px; border-style: solid;" usemap="#rade_img_map_1393269860391" /><br />
<map id="rade_img_map_1393269860391" name="rade_img_map_1393269860391">
<area shape="RECT" coords="16,19,59,67" href="http://www.google.com" /></map>

3. switch back to Design mode

4. click somewhere on the page outside the editor to get the focus away from the editor (this is necessary to reproduce the problem)

5. with the focus outside the editor, right-click directly on the image map area (the page/pencil icon)


Can you provide a solution to this problem?  Thanks.

[Ianko]

Hi Trevor,

The mentioned problem is an issue that is introduced due to the Chrome capabilities to handle Area elements in editable iframe. Because this is related to the browser's logic, I cannot suggest a firm approach to resolve the issue.

I can only suggest capturing the right-click event and replace the focused element, you can achieve this by following this example:

<telerik:RadEditor runat="server" ID="RadEditor1" OnClientLoad="OnClientLoad">
    <Content>
        <img src="http://demos.telerik.com/aspnet-ajax/editor/Img/editor.jpg" alt="product logo" style="margin-top: 25px; float: left; margin-right: 15px; border-width: 0px; border-style: solid;" usemap="#rade_img_map_1393269860391" /><br />
        <map id="rade_img_map_1393269860391" name="rade_img_map_1393269860391">
        <area shape="RECT" coords="16,19,59,67" href="http://www.google.com" /></map>
    </Content>
</telerik:RadEditor>

<script type="text/javascript">
    function OnClientLoad(editor, args) {
        editor.attachEventHandler("onmousedown", function (e) {
            if (e.which == 3 && e.srcElement.tagName === "AREA") {
                editor.setFocus();
                return false;
            }
        });
    }
</script>

Regards,
Ianko
Telerik