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

Hyperlink Manager and Image css float issue

1 Answer 60 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Paul
Top achievements
Rank 2
Paul asked on 03 Jul 2008, 08:25 AM
Hi,

I am currently experiencing an issue in IE7 when attempting to add a hyperlink (through the hyperlink manager) to an image that is contained within a floated div.

As an example, I have performed the following test on the demo site (http://www.telerik.com/DEMOS/ASPNET/Prometheus/Editor/Examples/Default/DefaultCS.aspx).

1. Add a div around the current image using the HTML view of the editor:
<div style="float: left;"><img alt="product logo" src="../../Img/productLogoLight.gif" /></div>
2. Go back to the Design view
3. Click on the image and select the Hyperlink Manager
4. Add a link to the image

The following output is produced in IE:
<a href="http://www.telerik.com">http://www.telerik.com</a>
<div style="float: left"><img alt="product logo" src="../../Img/productLogoLight.gif" /></div>

However, in firefox, it produces the expected output of:
<div style="float: left;"> <a href="http://www.telerik.com"><img src="../../Img/productLogoLight.gif" alt="product logo" /></a></div>

Is there any way to get this to work in IE?

1 Answer, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 03 Jul 2008, 01:28 PM
Hello Paul,

We researched the problem further and we found that it is due to a browser bug in IE.
This is the IE way of getting the selected element - doc.selection.createRange().parentElement(); We tested this code and verified that IE does not return correct value!

<telerik:radeditor runat="server" ID="RadEditor1">
    <Tools>
        <telerik:EditorToolGroup>
            <telerik:EditorTool Name="GetSelectedElement" />
        </telerik:EditorToolGroup>
    </Tools>
    <Content>
    <div style="float: left;"><img alt="product logo" src="http://www.telerik.com/demos/aspnet/Prometheus/Editor/Img/productLogo.gif" /></div>
    </Content>
</telerik:radeditor>
<script type="text/javascript">
Telerik.Web.UI.Editor.CommandList["GetSelectedElement"] = function(commandName, editor, args)
{
  //var elem = editor.getSelectedElement();
  var doc = editor.get_document();
 
  //IE way of getting the selected element - IE does not return correct value! This is not related to editor, we are not able to find a workaround for this scenario.   
 
  var elem = doc.selection.createRange().parentElement();
 
  alert(elem.id + "\n" + elem.tagName);
};
</script>

Since this is a browser related problem, it is not related to editor and we are not able to find a workaround for this scenario. If the DIV is not floating the code will work properly. We invite you to experiment yourself using the TextRange Object. You can find more information here and here.


Best regards,

Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
Tags
Editor
Asked by
Paul
Top achievements
Rank 2
Answers by
Rumen
Telerik team
Share this question
or