getSelectedElement issue in Chrome selects entire body

[Amy]

We have a custom dialog added to the radeditor that allows a user to select an image and open a pop-up window.  Everything has worked as expected until recently.  The functionality still works correctly in Firefox, but not in Chrome, Safari, or Opera; I believe those 3 use web-kit

When choosing 'inspect element' in Chrome, the body tag is highlighted for the image in the 'Elements' tab of the developer tools window, whereas, when doing the same thing in Firefox, the image tag is highlighted for the image in the 'Inspector' tab of the developer tools window.

There is an older post that references this same issue: http://www.telerik.com/forums/getselectedelement-issue-on-ff-e-chrome

The version of Telerik we are using is: 2015.3.930.45

However, we've been on that version for a while now.  The issue we're experiencing seems to be relatively new as our users would have already alerted us since the related functionality is used quite frequently.

The version of Chrome that I used to test the issue is: Version 46.0.2490.86 m (64-bit).  I suspect our users are at the same version since Chrome auto-updates itself.

 Please let me know what additional information I can provide.

Thanks!

[Ianko]

Hi Amy,

I created a custom tool on my end that alerts the tag name of the selected element. On my end, when an image is selected, the getSelectedElement() properly returns the same element. 

Here is the code used:

<telerik:RadEditor ID="RE1" runat="server">
    <Tools>
        <telerik:EditorToolGroup>
            <telerik:EditorTool Name="AlertTagName" />
        </telerik:EditorToolGroup>
    </Tools>
    <Content>
        <img src="http://www.thinkstockphotos.com/CMS/StaticContent/Hero/TS_AnonHP_462882495_01.jpg" />
    </Content>
</telerik:RadEditor>

<script>
    Telerik.Web.UI.Editor.CommandList["AlertTagName"] = function (commandName, editor, args) {
        alert(editor.getSelectedElement().nodeName);
    };
</script>

It would be more helpful if you can provide some more details about the command implemented to examine what the issue with that might be.

Regards,
Ianko
Telerik

[Amy]

Hi.  I apologize for the long delay in responding back.  We've discovered that an image will not center in a RadEditor if it the attribute style with a value of display:block.  Using display:block with margin set to auto is the most commonly suggested solution for centering an image.  Do you have any other suggestions that may work?

Thank you!

[Ianko]

Hi Amy,

The solution with the margin: 0 auto option is should be manually added via the HTML mode. Such cannot be applied using commands. 

However, the proper way to achieve this in an HTML editor is center align it via  the corresponding tool (http://screencast.com/t/iKDKkdzWhqx). This way, the image will be wrapped in a p tag and aligned center. 

Regards,
Ianko
Telerik

[Amy]

Hi Ianko,

Thank you for the response!  We use CSS to implement the display:block and margin:0 option, and due to the requirements of our web application (which interacts with another web application) need to use CSS for styling rather than wrapping the image in a p tag and aligned center.  

Below what we have implemented for the 'center' command in the radeditor...

Telerik.Web.UI.Editor.CommandList["AlignCenter"] = function (commandName, editor, args) {
               if (editor.getSelectionHtml() !== "") {
                   var commandArgs = new Telerik.Web.UI.EditorCommandEventArgs("FormatBlock", args.get_tool(), "<div style='text-align: Center;'>");
                   editor.fire("FormatBlock", commandArgs);
               }
               else {
                   alert("Please, select some text!");
                   args.set_cancel(true);
               }
           };

 

The above works fine for centering text, but will not work for what we need regarding centering images (regardless if it's a div or a p tag).  The CSS we currently use (i.e., display:block and margin:0 auto) works fine in Firefox.  The issue occurs in Chrome and Opera.

Any other ideas?  :-)

Thanks again!

[Ianko]

Hi Amy,

As this is a custom command and server a custom scenario, I am unable to help much. 

Note that the content in RadEditor is plain HTML. Thus, you should see what HTML you would be expecting on Chrome and Opera and design the command to generate the same.

Regards,
Ianko
Telerik

[Amy]

Hi Ianko,

I used the exact same code you initially provided, and can replicate this issue; this leads me to believe it is not related to our custom code.  To duplicate the issue, simply change style="display:block; margin: 0 auto;" to style="display:inline-block".  

When the style is set to "display:inline-block" and you click on the button to pop-up the alert, the element is 'IMG'.  When the display is changed to "display:inline-block; margin: 0 auto;" and you the click the button, the alert says the element is 'Body'.

This issue only occurs with an image inside the RadEditor.  Below is plain HTML that contains an image with an onclick event.  Regardless if the diplay attribute is set to inline-block or just block, the name of the element returned is always 'IMG', which is how it should be.

<html>
<head>
  <script type="text/javascript">
    function getEl(ev){
    origEl = ev.target || ev.srcElement;
    alert(origEl.tagName);
    }
  </script>
</head>
<body>
<img alt="" src="http://www.thinkstockphotos.com/CMS/StaticContent/Hero/TS_AnonHP_462882495_01.jpg" style="display: block; margin: 0 auto; " onclick="getEl(event);" />
</body>
</html>

We have to use CSS to center images in the RadEditor, so wrapping the image with a p tag or div tag will not work for us.

Based on the above, and also that the issue doesn't occur in Firefox, I believe this is related to the RadEditor and WeKit-based engines.

[Ianko]

Hi Amy,

I am not sure how this code has been tested with RadEditor. Using it inside the content, under Chrome browser, the alerted element is always the clicked image. You can observe my test here—http://screencast.com/t/BGOMoroBpve.

Regards,
Ianko
Telerik

[Amy]

I apologize. I think I have caused confusion with providing the HTML file.  Yes, the plain HTML file always shows the element when clicked is IMG regardless if the display is set to block with margin auto or inline-block.  

It's using the RadEditor in Chrome that incorrectly identifies the element as Body when the display is set to block with margin auto.

I'm attaching two screenshots.  The 'RadEditor_Chrome_DisplayBlock.png' file shows that Chrome incorrectly identifies the image as Body.  The 'RadEditor_Chrome_DisplayInlineBlock' file shows that Chrome correctly identifies the image as IMG.

Below is the exact code I used.  Change the display from block with margin auto to inline-block and you will see what I'm saying.  If it was possible I would provide a video demonstrating the problem.

 

<telerik:RadEditor ID="RE1" runat="server" >
    <Tools>
        <telerik:EditorToolGroup>
            <telerik:EditorTool Name="AlertTagName" />
        </telerik:EditorToolGroup>
    </Tools>
    <Content>
        <img src="http://www.thinkstockphotos.com/CMS/StaticContent/Hero/TS_AnonHP_462882495_01.jpg" style="display: block; margin: 0 auto;" />
    </Content>
</telerik:RadEditor>

[Ianko]

Hello Amy,

After some research it appeared that it is mainly the browser that cause this. When the image is selected, browser actually selects the text node after the image. That confuses the RadEditor engine that a collapsed selection is executed and thus, the selected element is returned as the body element as this is the expected result from such an action. This cannot be prevented as there is no possible approach to whether browser has selected that way the image or end-user indeed has selected text and image as collapsed range. 

The cure for that behavior is to make sure that the image is always wrapped in a block element. P or Div tag. Like this code:

<div><img src="http://www.thinkstockphotos.com/CMS/StaticContent/Hero/TS_AnonHP_462882495_01.jpg" style="display: block; margin: 0 auto;" /></div>

Or make sure that after such image a BR tag is inserted:

<img src="http://www.thinkstockphotos.com/CMS/StaticContent/Hero/TS_AnonHP_462882495_01.jpg" style="display: block; margin: 0 auto;" /><br />

Regards,
Ianko
Telerik