Safari linebreak issues

19 posts, 0 answers
  1. Kent-Remi
    Kent-Remi avatar
    6 posts
    Member since:
    Feb 2008

    Posted 07 Mar 2008 Link to this post

    Hi!
    I have a issue in Safari; it adds <div>'s and <span>'s instead of <br />'s!
    Sometimes it also add some el weirdo styling, like color(rgb...)
    This must be a bug, or??
    Any ideas? Safari users is wrecking my site layout :(
  2. Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 07 Mar 2008 Link to this post

    Hi Kent-Remi,

    RadEditor does not handle the Enter command in Safari and it is the browser that inserts a <div> tag for a new line. This is a default Safari browser behavior, which our control does not control.

    Best regards,
    Rumen
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jeff
    Jeff avatar
    51 posts
    Member since:
    Aug 2007

    Posted 26 Aug 2009 Link to this post

    This is still a problem. Are you saying that Telerik is unable or does not care to support Safari/Chrome? The HTML generated by WebKit is atrocious and simply unacceptable.

    Couldn't Telerik hook into the keydown/keypress events and clean up the garbage in real-time?
  5. Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 31 Aug 2009 Link to this post

    Hi Jeff,

    The production of identical XHTML content in all browsers is one of our top priorities and the better handling of new paragraphs / lines (Enter key) in WebKit browsers is logged with high priority in our ToDo list for Q3 2009.

    Meanwhile you can use the following workaround:

    <telerik:RadEditor id="RadEditor1" OnClientLoad="OnClientLoad" runat="server"
        <Content> 
        dasdas<div>asdasd</div> 
        </Content> 
    </telerik:RadEditor>  
    <script type="text/javascript"
    function OnClientLoad(editor, args) 
       if ($telerik.isSafari) editor.get_filtersManager().add(new MyFilter()); 
    MyFilter = function() 
       MyFilter.initializeBase(this); 
       this.set_isDom(false); 
       this.set_enabled(true); 
       this.set_name("RadEditor filter"); 
       this.set_description("RadEditor filter description"); 
    MyFilter.prototype = 
       getHtmlContent : function(content) 
       { 
         var newContent = content; 
          
         newContent = newContent.replace(/<div>/gi,"<p>").replace(/<\/div>/gi,"</p>"); 
         return newContent; 
       } 
    MyFilter.registerClass('MyFilter', Telerik.Web.UI.Editor.Filter); 
    </script> 

    The content filter is based on the following live example: Custom Content Filters.

    Best regards,
    Rumen
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  6. Jeff
    Jeff avatar
    51 posts
    Member since:
    Aug 2007

    Posted 04 Sep 2009 Link to this post

    Hi Rumen,

    Consistent XHTML would be wonderful and I applaud your commitment to achieving it.

    My concern with WebKit goes beyond new line handling. Every element it seems has awful, often proprietary styling.

    Will Q3 strip out these style attributes?

    I need to decide whether to simply not support WebKit until telerik fixes this or whether I should fix it myself with filters.

    Thanks,
    Jeff
  7. Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 09 Sep 2009 Link to this post

    Hi Jeff,

    Could you please provide step-by-step instructions on how to produce such content in Safari / Chrome and specify what exactly should be stripped?

    Best regards,
    Rumen
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  8. Jeff
    Jeff avatar
    51 posts
    Member since:
    Aug 2007

    Posted 09 Sep 2009 Link to this post

    I have to admit I'm having trouble reproducing the funny styling and classes I was seeing. I don't know what has changed. I hope that doesn't hurt my credibility too much. :)

    What I remember seeing is this:
    • Each <p> element contained a class="<some WebKit class>"
    • Most elements contained multiple styles, usually all four margins specified individually (margin-left, margin-right, etc.)

    What I can say for sure:
    • Hitting enter doesn't create paragraphs, it creates divs, unless you get it started with a properly formed paragraph
    • Ctrl+B and Ctrl+I (and possibly others) don't work. The buttons in the toolbar respond to the shortcuts but the content doesn't change.
    • Content within <li> elements is wrapped with <span> tags with a line-height style. For example: <li><span style="line-height: normal; ">Point #1</span></li>

    That's all I have at the moment. I'll let you know if I figure out how to get it in that mode where it's spitting out all these undesirable style and class attributes.

    Jeff


  9. Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 14 Sep 2009 Link to this post

    Hi Jeff,

    Thank you for the listed behaviors that appear in Safari. I logged them to our ToDo list for enhancements.

    Let us know if you are able to reproduce the WebKit class issue. I will add it to the ToDo item as well.

    Best regards,
    Rumen
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  10. Keith LeBeau
    Keith LeBeau avatar
    51 posts
    Member since:
    Feb 2005

    Posted 26 Oct 2009 Link to this post

    We're experiencing the same problem with divs and sometimes color(rgb...) in Chrome. Is the fix for this definitely going to make the Q3 2009 release?
  11. Lini
    Admin
    Lini avatar
    2144 posts

    Posted 27 Oct 2009 Link to this post

    Hi Keith,

    The <div> issue is not fixed yet, however, we offer a workaround that should make the Safari/Chrome output compliant. If you are starting with an empty editor, simply set its initial content to an empty paragraph: "<p><br/></p>". After that the browser should no longer insert <div>s when you press Enter and will continue adding normal paragraphs.

    The rgb(color) issue should be fixed in the current official build (Q2 2009 SP). If you still get the rgb(color) instead of #color please send us the editor content or a list of steps to reproduce the issue on our online demos (http://demos.telerik.com/aspnet-ajax/editor/examples/default/defaultcs.aspx

    The Ctrl+B, Ctrl+I issues have been fixed and the fix will be included in the Q3 2009 release.

    Sincerely yours,
    Lini
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  12. Keith LeBeau
    Keith LeBeau avatar
    51 posts
    Member since:
    Feb 2005

    Posted 27 Oct 2009 Link to this post

    Good morning.  Thank you for the additional information however, this is not a solution that will prove valuable here.  A single backspace in design view after implementing this, removes this fix and allows the problem to continue to occur.  Is there a more 'solid' fix that I can put in place to resolve the issue, or perhaps do you have a timeline for a release that will resolve it? Thanks!
  13. Lini
    Admin
    Lini avatar
    2144 posts

    Posted 06 Nov 2009 Link to this post

    Hi,

    At the moment we cannot offer a more solid fix for this, because one will require a number of changes in the editor and not all of them can be done with the public API. However, we will have a solution for this soon - perhaps in the next service pack release of Q3 2009. I apologize for the delay.

    Sincerely yours,
    Lini
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  14. Nick Jensen
    Nick Jensen avatar
    17 posts
    Member since:
    Jun 2006

    Posted 18 Dec 2009 Link to this post

    Hi, I'm having some more unusual issues with line-breaks in Safari/Chrome.

    We use some custom tags in our editor to encapsulate conditional blocks of content. A simplified version looks like this:
    <var style="background-image: url(http://www.dialogportal.dk/images/icons/condition-begin.gif); background-repeat: no-repeat; display: inline-block; width: 16px; height: 16px; margin-right: 3px; "></var> 
     Conditional content 
    <var style="background-image: url(http://www.dialogportal.dk/images/icons/condition-end.gif); background-repeat: no-repeat; display: inline-block; width: 16px; height: 16px; margin-left: 3px; "></var> 

    Try copying the above segment of code and pasting it into the HTML view of the Telerik First Look Demo, at the very start of the code. Now go back to design mode, and it displays in the format [icon]Conditional content[icon]. If you move the cursor in front of the first icon and hit "Enter", the cursor jumps to the bottom of the editor, and adds the newline there. Looking at the resulting code, <div><br /></div><div><em><br /></em></div> is added at the bottom.

    This is quite frustrating, it is very difficult to edit the page around this behaviour. Have you come across this before, and is there anything I can do to work around it?

    Nick
  15. Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 18 Dec 2009 Link to this post

    Hi Nick,

    RadEditor is an HTML / XHTML editor which uses the Rich Text Editing engine of the browser in which operates. The observed custom tag scenario is not supported and the result is a browser behavior. You can reproduce it with the attached editable IFRAME html page as well as with our competitors' editors too.

    Since this scenario is controlled entirely by the browser we cannot override it and provide a solution.

    All the best,
    Rumen
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  16. Igor
    Igor avatar
    1 posts
    Member since:
    Apr 2011

    Posted 28 Apr 2011 Link to this post


    We still experiencing issue in Safari: it adds <div>'s instead of <br />'s.
    I can reproduce the issue on your online demos (http://demos.telerik.com/aspnet-ajax/editor/examples/default/defaultcs.aspx)
    Could you please provide me with the ETA for issue ?
  17. Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 03 May 2011 Link to this post

    Hi Nick,

    Could you please provide steps how to reproduce the <div> problem in Safari when the NewLineMode property is set to Br? You can record your screen with Jing or provide screenshots along with steps and sample content which will help us to replicate the problem.
    Please see my test in the following video http://screencast.com/t/ilwEiO8Wc and let me know if I am missing something?

    Best regards,
    Rumen
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  18. Alexander Yaremenko
    Alexander Yaremenko avatar
    13 posts
    Member since:
    Sep 2012

    Posted 09 May 2011 Link to this post

    Hi Guys,

    The issue with adding <div>'s instead of <br> 's reproduces by entering Shift+Enter(not the Enter).
    Note: In the IE8 and Firefox it works fine.

  19. Aren
    Aren avatar
    7 posts
    Member since:
    Apr 2011

    Posted 09 May 2011 Link to this post

    Just wanted to point out that TinyMCE and CKEditor don't have this problem with Safari. See http://tinymce.moxiecode.com/tryit/full.php and http://ckeditor.com/demo.
  20. Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 11 May 2011 Link to this post

    Hi guys,

    Indeed, the Shift+Enter shortcut scenario is not handled by RadEditor when the NewLineMode property is set to "Br" and a <div> tag is inserted.

    I logged this scenario in our PITS system and we will implement it. Here you can find the PITS Issue: Public URL.

    Best regards,
    Rumen
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017