TinyMCE in IE8 doesn't tolerate bad HTML very well

Glen Dinsmore
asked this on July 8, 2011, 7:08 PM

Here is the issue. The attached html segment (ProdNotice.html) was somehow entered into a TinyMCE entry area. I was able to duplicate this simply by opening the html segment in Firefox 3.6, selecting the entire page, and pasting it into the TinyMCE entry area.

If you look at the html file carefully, you'll notice that it's not correct HTML. Specifically, it appears that one line of text was deleted in the middle, leaving two elements that never get closed.

The effect this little mistake has is pretty dramatic in IE 8. If you open the text in TinyMCE, press the full screen button, and then go back to regular mode, all of the text becomes centered. I was able to duplicate this easily on IE8. It didn't work for me on FF 3.6. I didn't try any other browsers yet.

My question is this: Doesn't TinyMCE check the HTML as it's rendering it? Why doesn't it handle incorrect HTML like this better? Can it be corrected?

Secondarily, I would also like to know if it's possible for TinyMCE to generate this broken HTML, not counting the user manually modifying the HTML (we don't offer that option, so if they manually changed the HTML they didn't do it from inside of TinyMCE). Maybe it's a known issue that has since been fixed?

Comments

Brett Henderson

Ephox

Hi Glen,

I tried pasting in the HTML you provided into the Source Editor in TinyMCE 3.4.2 in both Safari (OSX) and IE 8 (Win7). The HTML snippet below, located between "From the Office of General Counsel" and "This notice is intended to advise you that a Legal Hold regarding"

I'd suspect there is something in your config that may have ensure that the HTML cleanup didn't occur.

With respect to TinyMCE generating incorrect HTML, if you remove the ability for users to enter it themselves, then you shouldn't see this issue. That said, as I mentioned, it's possible the configuration you are using may have something to do with what you saw.

Cheers,

Brett

July 10, 2011, 6:49 PM

Glen Dinsmore

PSS Systems

Answer

Ahh, yes. Turns out that "paste_auto_cleanup_on_paste" is disabled. Now I'm wondering why we did that. Unfortunately, the person that last worked on TinyMCE in our application isn't available. I'm going to have to re-enable that option, and see what breaks.

Any thoughts on why the issue I described above would happen only with certain browsers, and then only when switching between full screen and regular mode?

Thanks again.

July 12, 2011, 12:58 PM

Brett Henderson

Ephox

Hi Glen,

Are you working with the IBM WCM dev team?

Cheers,Brett

July 12, 2011, 11:05 PM

Glen Dinsmore

PSS Systems

IBM Atlas Suite dev team, actually.

July 13, 2011, 9:35 AM

Glen Dinsmore

PSS Systems

OK... I was too quick declaring victory. I enabled paste_auto_cleanup_on_paste, and I still get the same problem. Here is my exact init:

I've also refined the HTML to the minimum that will duplicate the problem. Turns out, the HTML is actually valid. Here it is:

<p style="text-align: center" align="center">From the Office of General Counsel</p><span><p style="text-align: center" align="center">&nbsp;</p></span><p>Step 1: You must read and understand this Notice of Legal Hold.</p>

If I replace the <span> and </span> with <p> and </p> then this problem does not occur. Is there some special problem with span? Maybe my valid_elements value is contributing to the problem?

Thanks

July 13, 2011, 6:19 PM

Glen Dinsmore

PSS Systems

More details. I captured the DOM using IE's Developer Tools. This is what it looks like at the different steps:

<P align=center _mce_style="text-align: center;">From the Office of General Counsel</P><P><SPAN><P align=center _mce_style="text-align: center;">&nbsp;</P></SPAN></P><P>Step 1: You must read and understand this Notice of Legal Hold.</P>

Restored:

<P align=center _mce_style="text-align: center;">From the Office of General Counsel<P></P><P><SPAN><P align=center _mce_style="text-align: center;">&nbsp;<P></P><P></P><P>Step 1: You must read and understand this Notice of Legal Hold.<P></P></P></P></SPAN></P></P>