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

[Solved] getSelectedElement() returns wrong element for nested element?

7 Answers 215 Views

Editor

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

abdu bukres asked on 16 May 2008, 08:04 AM

My editor has the test html below. I created a custom button to display the nodeName for any selected html element. If I select the outer div I get "DIV" as the nodeName. However if I select the inner div, I get "BODY" as the nodename. I was expecting "DIV". I need to get a reference to that div so I can change some of its attributes/

JavaScript for Command List:
alert(editor.getSelectedElement().nodeName);

Content in editor:

<div style="border-right: red 1px solid; border-top: red 1px solid; border-left: red 1px solid; width: 400px; border-bottom: red 1px solid; height: 400px" id="outerdiv">
<div id="innerdiv" style="border-right: blue 1px solid; border-top: blue 1px solid; margin: 30px; border-left: blue 1px solid; width: 300px; border-bottom: blue 1px solid; height: 300px">this is a test</div>
</div>

abdu

7 Answers, 1 is accepted

answered on 15 Jun 2009, 03:11 PM

Hi Gerry,

The problem is not yet resolved because it is due to a browser bug. Our recommendation is to implement the getSelectedElement method yourself using as a base the information in the following sites:
text ranges,
Introduction to Range
and
Complex selection in DOM ranges.

You can get a reference to the editor's Document using the editor.get_document() method.

Best regards,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

answered on 17 Jun 2009, 01:22 PM

Hi all,

Let me provide some more information about some quirks with the IE selection.

@Abdu
I tested with your code and the editor works just fine with IE and FF (although for FF I had to use the RadEditorDomInpsector module to select the DIVs, while in IE clicking with the mouse on a DIV is enough).
The custom tool that I implemented showed the correct DIV was the selection and not the BODY. Here is my code:

    
                        <telerik:radeditor runat="server" ID="RadEditor1"> 
        
                         <Tools> 
        
                         <telerik:EditorToolGroup> 
        
                         <telerik:EditorTool Name="SelectedElement" /> 
        
                         </telerik:EditorToolGroup> 
        
                         </Tools>      
        
                         <Modules> 
        
                         <telerik:EditorModule Name="RadEditorDomInspector" /> 
        
                         </Modules>                            
        
                          <Content>                                               
        
                          <div style="border-right: red 1px solid; border-top: red 1px solid; border-left: red 1px solid; width: 400px; border-bottom: red 1px solid; height: 400px" id="outerdiv"> 
        
                            <div id="innerdiv" style="border-right: blue 1px solid; border-top: blue 1px solid; margin: 30px; border-left: blue 1px solid; width: 300px; border-bottom: blue 1px solid; height: 300px">this is a  test</div> 
        
                        </div> 
        
                          </Content>                                         
        
                       </telerik:radeditor> 
        
            <script> 
        
            Telerik.Web.UI.Editor.CommandList["SelectedElement"] = function(commandName, editor, args) 
        
            { 
        
                var elem = editor.getSelectedElement(); 
        
                 alert(elem.nodeName + " id=" + elem.id); 
        
            }; 
        
            </script>

@Gery
Gery, your scenario is fundamentally different, albeit seemingly the same. While DIV elements are block elements, neither A nor IMG is a block element. This more or less causes IE to mess up which the real selection is when a link wraps an IMG. We have been able to work around this for editor tools dealing with links by explicitly checking for parent/child relationships with A and IMG involved. This is what I would suggest to you in your scenario as well - extra checks! Please note that this selection problem should only happen in IE, and not in other browsers (you can test that)

To wrap things up, in case you experience different results, then I will ask you to open a support ticket an send us a runnable project that demonstrates the issue you have at hand. There are many (seemingly unrelated) factors that can affect this particular behavior, so to resolve any outstanding issue it is best to have a real test project for examination.

All the best,
Tervel
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.