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

Problem deleting element in design mode

2 Answers 23 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Trevor
Top achievements
Rank 1
Trevor asked on 07 Nov 2013, 12:36 AM
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.

2 Answers, 1 is accepted

Sort by
0
Bill
Top achievements
Rank 1
answered on 07 Nov 2013, 05:08 PM

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
0
Ianko
Telerik team
answered on 11 Nov 2013, 12:26 PM
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:

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

Regards,

Ianko
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Tags
Editor
Asked by
Trevor
Top achievements
Rank 1
Answers by
Bill
Top achievements
Rank 1
Ianko
Telerik team
Share this question
or