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.

4 Answers, 1 is accepted

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.

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