Problem deleting element in design mode

[Trevor]

One of our customers has reported a problem with the Editor using Chrome or Firefox.

The problem can be demonstrated quite easily using the demo editor, here: http://demos.telerik.com/aspnet-ajax/editor/examples/overview/defaultcs.aspx

Steps to reproduce:

switch to HTML view

delete everything in the editor and paste in the following:

<p><strong></strong></p>
<img alt="" src="http://www.telerik.com/assets/img/telerik-navigation/telerik-logo.png" />

switch back to Design view

attempt to delete the 'empty space' above the image.


Using IE, the empty space (the <p> element) above the image can be removed easily - just click above the image and hit the delete key.

Using FF and Chrome, it is not possible to position the cursor above the image, on the <p> tag, so there is no way to remove the <p> element.

I guess the customer is pasting in a lot of html and is dealing with this problem frequently.

Is there a solution to this problem?  Thanks,

Trevor.

[Bill]

A problem we've seen also.

Seems to be the lack of anything renderable within the p tag.  The following works ok (you can delete the empty space):

<p>&nbsp;</p>
<img alt="" src="http://www.telerik.com/assets/img/telerik-navigation/telerik-logo.png" />

As does this:

<p><strong>&nbsp;</strong></p>
<img alt="" src="http://www.telerik.com/assets/img/telerik-navigation/telerik-logo.png" />


A workaround would be a filter to remove empty p tags, but haven't thought much about potential bad side effects.

Good luck deleting the <br/> in the following:

  <p><strong></strong></p>
<img alt="" src="http://www.telerik.com/assets/img/telerik-navigation/telerik-logo.png" /><br />

Regards,
Bill

[Ianko]

Hi Trevor and Bill,

The mentioned issues are happening because of the browser's behavior when handling an editable iframe element.

Empty elements without any text or an &nbsp; inside, cannot be rendered as correct ones and due to that they are not selectable. You can test this scenario with the attached sample HTML page, in which a simple editable iframe is configured.

The last <br>, which is not removable happens only under chrome, which appears to be because the browser's logic breaks when there is no text node between the element and the <br>. For example you can test the scenario with these lines of HTML code and see the differences:

• The logic breaks with:

  <img alt="" src="http://www.telerik.com/assets/img/telerik-navigation/telerik-logo.png" /><br/><br/>

• The logic works ok with:

  <img alt="" src="http://www.telerik.com/assets/img/telerik-navigation/telerik-logo.png" />
  <br/><br/>

Due to the reason that this is related to the browsers' implementation, we are unable to control or fix such issues. 

Regards,

Ianko
Telerik