FCKeditor wrapping certain HTML5 elements with <p> tags - causing problems for older browsers

Question

I'm being forced to use a WYSIWYG editor on a CMS our website is being published on, and the default behavior for white space is blank <p></p> tags (this is expected).

FCKeditor.prototype.Version         = '2.6' ;
FCKeditor.prototype.VersionBuild    = '18638' ;

That's fine, but the big problem is that the editor does not seem to recognize HTML5 elements as independent, block elements, and is wrapping <section>, <aside>, and other HTML5 tags inside <p>...</p> containers!

The DOCTYPE the CMS pages use is "XHTML Transitional," something I have no control over. However, I have declared in my custom CSS that all the HTML5 elements I'm using should display as block elements, and I've even included an HTML5shiv.js helper script to extend support for these elements to older browsers.

For instance:

This is a paragraph. <!-- using SHIFT+ENTER in the WYSIWYG -->
This should be a new line in the paragraph. <!-- using ENTER in the WYSIWYG -->


<section>
    <article>Some block text</article>
</section>

is becoming:

<p>This is a paragraph.<br/> <!-- using SHIFT+ENTER in the WYSIWYG -->
This should be a new line in the paragraph.</p>
<p></p>
<p></p>
<p><section><article>Some block text</article></section></p>

as soon as the Save button is pressed.

First of all, what will modern vs. older browsers do when they see a <section> inside a <p> tag? How do they adjust the DOM for this situation? I explored the final DOM on the page for all modern browsers including IE9+, and they seem to ignore the errant container <p>...</p> tags, and/or close them before the HTML5 elements are parsed.

However, when viewing on Android's Mobile 2.1 Browser (only 2.1), and IE7 and earlier, the behavior is all over the place.

Knowing that:

1. I do not have any access to modify the FCKeditor files as this post explains.
2. I do not have access to configure the WYSIWYG editor the CMS is using nor update it
3. I can only run <script type="text/javascript"> scripts, no PHP is allowed.

How do I solve this problem for those older browsers that are having trouble?

Answer 1

Older browsers will treat the HTML5 elements as an inline element with the DOM:

<p>
  <section>...</section>
</p>

Modern browsers will separate the <p> tags into two sections resulting in DOM:

<p></p>
<section>...</section>
<p></p>

With this in mind, you can detect if the parent of the section is p if not remove the excess <p>. http://jsfiddle.net/kJzSs/1/

var sections=document.getElementsByTagName('section');
for(var i=0;i<sections.length;i++){
   if(sections[i].parentNode.localName!='p'){
      sections[i].previousElementSibling.remove();
      sections[i].nextElementSibling.remove();
   }
}

to be a bit more careful, it may be good to add a check before removing the siblings, something like:

if(sections[i].previousElementSibling.localName=='p')

if(sections[i].previousElementSibling.textContent=='')

Answer 2

In the end, I decided to just "flatten" stuff by using 'display: inline !important' any <p> elements not inside <article> elements. Easy way out, I suppose!