This is a migrated thread and some comments may be shown as answers.

Node Borders Scrolls with Editor

4 Answers 76 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Sarah
Top achievements
Rank 1
Sarah asked on 18 May 2010, 03:45 PM
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?

4 Answers, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 18 May 2010, 03:56 PM
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.
0
Sarah
Top achievements
Rank 1
answered on 18 May 2010, 04:10 PM
Thanks.
0
Sarah
Top achievements
Rank 1
answered on 18 May 2010, 04:37 PM
The problems I have now are:
- how to deselect an element already selected
- how to disable selection for other elements (tables, divs, etc)
0
Rumen
Telerik team
answered on 20 May 2010, 04:11 PM
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.
Tags
Editor
Asked by
Sarah
Top achievements
Rank 1
Answers by
Rumen
Telerik team
Sarah
Top achievements
Rank 1
Share this question
or