Safari linebreak issues

[Kent-Remi]

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 :(

[Rumen]

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

[Jeff]

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?

[Rumen]

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.

[Jeff]

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

[Rumen]

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.

[Jeff]

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

[Rumen]

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.

[QScend]

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?

[Lini]

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.

[QScend]

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!

[Lini]

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.

[Nick Jensen]

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

[Rumen]

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.

[Igor]

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 ?

[Rumen]

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

[Alexander Yaremenko]

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.

[Aren]

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.

[Rumen]

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