Problem deleting element in design mode

3 posts, 0 answers
  1. Trevor
    Trevor avatar
    53 posts
    Member since:
    Jan 2012

    Posted 06 Nov 2013 Link to this post

    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. Bill
    Bill avatar
    10 posts
    Member since:
    Jul 2013

    Posted 07 Nov 2013 Link to this post


    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
  3. Ianko
    Admin
    Ianko avatar
    1738 posts

    Posted 11 Nov 2013 Link to this post

    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.
Back to Top