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

Safari linebreak issues

18 Answers 175 Views

Editor

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

18 Answers, 1 is accepted

answered on 31 Aug 2009, 10:50 AM

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.

answered on 09 Sep 2009, 07:34 PM

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

answered on 27 Oct 2009, 01:21 PM

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.

answered on 18 Dec 2009, 10:18 AM

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

answered on 18 Dec 2009, 03:19 PM

editableiframe.zip

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.

answered on 03 May 2011, 09:53 AM

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.