TABLE tag gets opening and closing P tags before and after in UI for ASP.NET AJAX Editor

Cameron

28 posts

Member since:
Oct 2011

Posted 02 Feb 2012 Link to this post

Hi,

Thanks for your help with previous inquiries that I've had.

I've got this issue and am confused by it.
This is something that we are trying to understand why it's happening here and not with other html elements.

Follow these steps:
1. In Design mode, add a table to the editor.
2. Got into HTML mode and wrap the table in a paragraph tag so all you get is something like:
<p>
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
</p>

Go into Design mode, and then go back into HTML mode.
And all of a sudden it looks like this:
<p>
</p>
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>

Why did it do that?

If I put some random junk instead of a table and do the same thing, the content remains inside the paragraph.

This is currently driving me crazy as I cannot figure out how to fix this.

Any help would be appreciated.

Thanks,
Cameron

Cameron

28 posts

Member since:
Oct 2011

Posted 02 Feb 2012 Link to this post

Just a quick update.

This does the same thing for <ul> and <div> tags.

And all block-level tags.

I'm guessing it's an XHTML thing, but we are explicitly disabling that filter:
radeditor.DisableFilter(Telerik.Web.UI.EditorFilters.ConvertToXhtml);

Any suggestions?

Rumen

Admin

14462 posts

Posted 03 Feb 2012 Link to this post

Hello,

Yes, the XHTML specification does not allow to put block elements in P tags and the enhanced rich text editing engine of IE9 corrects the invalid content. You can reproduce the same behavior in an editable iframe. The browser does not offers an API for disabling its validation mechanism.

Best regards,
Rumen
the Telerik team

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 their blog feed now

EditableIFRAME.zip

Cameron

28 posts

Member since:
Oct 2011

Posted 09 Feb 2012 Link to this post

Thanks Rumen.

Since I'm not using IE9, why is it still doing the formatting?
Also, even though I know it is invalid, is there a way to force the RadEditor to ignore that and let block-level elements be nested within paragraph tags?

Thanks,
Cameron

Rumen

Admin

14462 posts

Posted 10 Feb 2012 Link to this post

Hi,

Even if you disable the RadEditor's content filters (all of them), the browser's rich text editing engine will continue to validate and modify the content. If you would like you can render the page in IE8 mode and see how the browser will modify the content. To do that put the following meta tag on the page with the editor:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />

All the best,
Rumen
the Telerik team

Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>

Cameron

28 posts

Member since:
Oct 2011

Posted 15 Mar 2012 Link to this post

So, even if I never use IE (8 or otherwise), and use only Chrome or FireFox, setting the meta tag will show me what modifications will be made?

I did open and ran both of the html files with the editable iframes in them. In both of them the html was encoded, but it was not modified elsewhere. At the beginning was the opening <p> tag. Then came the <table> definition and after the </table> was the </p>.

Let me ask a followup question.

I know that I can use the OnClientModeChange to catch the changing from HTML to Design mode. I know that it is rewriting the html code when going to HTML from Design mode or when coming from Design mode to HTML.

The question is how do I "fix" the html so it leaves the <p> tags as is. i.e. no unintentional modifications of the html code.

Thanks,
Cameron

Cameron

28 posts

Member since:
Oct 2011

Posted 15 Mar 2012 Link to this post

I believe that a built-in filter is changing the HTML code when you go from HTML mode to Design mode (or when you submit).

I tried using the demo's for built-in filters (http://demos.telerik.com/aspnet-ajax/editor/examples/builtincontentfilters/defaultcs.aspx) and disabled them all, but the outcome was still the same - it rewrote the html code to make it compliant, but for legacy sakes and the way certain templates are designed this is unacceptable and needs to be disabled.

Please let me know which content filter is firing and how to disable it or at least interrupt it prior to execution.

Thanks,
Cameron

Rumen

Admin

14462 posts

Posted 20 Mar 2012 Link to this post

Hi,

1) So, even if I never use IE (8 or otherwise), and use only Chrome or FireFox, setting the meta tag will show me what modifications will be made? - the meta tag <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" /> applies to Internet Explorer browsers but not to WebKit and Firefox.

2) I did open and ran both of the html files with the editable iframes in them. In both of them the html was encoded, but it was not modified elsewhere. At the beginning was the opening <p> tag. Then came the <table> definition and after the </table> was the </p>. - I got different result in IE9. In IE8 and Firefox, the rich text editing engines of these browsers did not modify the content as shown in this video: http://screencast.com/t/9Q4T1zjgsv.

Kind regards,
Rumen
the Telerik team

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 their blog feed now.