Node Borders Scrolls with Editor

[Sarah]

When I select an object, such as an image, it shows the nodes and borders.  While selected, the nodes and borders scroll along with the editor.  They are visible but the content of course isn't.  See attachment.

Is there a fix to this or a way to not show the nodes and borders?

[Rumen]

Hi Sarah,

The observed behavior and the images handlers are entirely controlled by the browser and they could not be controlled and hidden by javascript code - you can easily reproduce the same behavior in an editable IFRAME / DIV element as well as in our competitors' editors.

You can try to avoid this browser behavior by disabling the image resize handlers by applying unselectable=on to all images in the content area.

<script type="text/javascript">
function OnClientLoad(editor, args)
{
    var images = editor.get_document().getElementsByTagName("IMG");
    for (i=0;i<images.length;i++)
    {
        var image = images[i];
        image.setAttribute("unselectable","on");
    }

    editor.attachEventHandler("oncontrolselect", function()
    {
        //Check if image
        window.setTimeout(function()
        {
             var selElem = editor.getSelection().getParentElement();
             if (selElem.tagName == "IMG")
             {
                selElem.setAttribute("unselectable","on");
             }
        }, 0);
    });
}
</script>
<br /><br /><br />
<telerik:RadEditor ID="RadEditor1"
    OnClientLoad="OnClientLoad" ToolbarMode="showOnFocus"
    runat="server"  Width="400" Height="400">
    <Content>test
      <img src="http://www.telerik.com/DEMOS/ASPNET/RadControls/Editor/Skins/Default/buttons/CustomDialog.gif"/>
      <a href="www.telerik.com">telerik</a>
      <img src="http://www.telerik.com/DEMOS/ASPNET/RadControls/Editor/Skins/Default/buttons/CustomDialog.gif"/>
    </Content>
</telerik:RadEditor>

Sincerely yours,
Rumen
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Sarah]

Thanks.

[Sarah]

The problems I have now are:
- how to deselect an element already selected
- how to disable selection for other elements (tables, divs, etc)

[Rumen]

Hello Sarah,

Straight to the points:
1) You can deselect an already selected element by clicking outside its boundaries.
2) You can disable all elements by adding a check for their tags:

var selElem = editor.getSelection().getParentElement();
if (selElem.tagName == "IMG" || selElem.tagName == "TABLE" || selElem.tagName == "DIV")         
{
      selElem.setAttribute("unselectable","on");
}


Best regards,
Rumen
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.