Why does the WYSIWYG Editor in SP2010 keep adding unwanted <p> tags?

Question

I had posted this already once but, didn't get what I thought was any good option for a solution. Not using the WYSIWYG editor at all is the "not good" solution.

Regardless of the browser being used, the editor is adding and removing HTML without my consent. Here are a few examples:

While editing within the "Page Content" area (completely blank no HTML yet) I insert a "Reusable Content" object and hit my Enter key for a carriage return. The code for this is as follows:

<p><span class="ms-reusableTextView ms-rtestate-read" id="__publishingReusableFragment" contenteditable="false" fragmentid="/ReusableContent/4_.000"><p><img src="/Style%20Library/Images/company_logo.jpg" alt="" style="margin: 5px"/></p>
    <table class="ms-rteTable-default" cellspacing="2" cellpadding="3" style="border-bottom: 0px; border-left: 0px; background-color: #840039; width: 750px; font-size: 1em; border-top: 0px"><tbody><tr><td width="66%">&#160;</td>
    <td width="8%"><a href="/pages/faq.htm" style="color: #ffffff; font-size: 10px; font-weight: normal; text-decoration: none"><img width="11" height="11" src="/Style%20Library/Images/bullet_square_grey.jpg" border="0" alt=""/> FAQs</a> </td>
    <td width="17%"><a href="/pages/security.htm" style="color: #ffffff; font-size: 10px; font-weight: normal; text-decoration: none"><img width="11" height="11" src="/Style%20Library/Images/bullet_square_grey.jpg" border="0" alt=""/> Account Security</a> </td>
    <td width="9%"><a href="/pages/home.htm" style="color: #ffffff; font-size: 10px; font-weight: normal; text-decoration: none"><img width="11" height="11" src="/Style%20Library/Images/bullet_square_grey.jpg" border="0" alt=""/> Home</a> </td></tr></tbody></table></span></p>
    <p>&#160;</p>

Now, the strangeness begins. If I type in some text such as "Hello world!" and then say I go click on the icon for "Font Color". If I move my mouse over the palette, for each color I hover over a line of code with  

 

in it is created. So for example, the code looks like this now after hovering over the colors (also, this happens no matter what icon is used I just happen to use font color in this example):

<p><span class="ms-reusableTextView ms-rtestate-read" id="__publishingReusableFragment" contenteditable="false" fragmentid="/ReusableContent/4_.000"><p><img src="/Style%20Library/Images/company_logo.jpg" alt="" style="margin: 5px"/></p>
    <table class="ms-rteTable-default" cellspacing="2" cellpadding="3" style="border-bottom: 0px; border-left: 0px; background-color: #840039; width: 750px; font-size: 1em; border-top: 0px"><tbody><tr><td width="66%">&#160;</td>
    <td width="8%"><a href="/pages/faq.htm" style="color: #ffffff; font-size: 10px; font-weight: normal; text-decoration: none"><img width="11" height="11" src="/Style%20Library/Images/bullet_square_grey.jpg" border="0" alt=""/> FAQs</a> </td>
    <td width="17%"><a href="/pages/security.htm" style="color: #ffffff; font-size: 10px; font-weight: normal; text-decoration: none"><img width="11" height="11" src="/Style%20Library/Images/bullet_square_grey.jpg" border="0" alt=""/> Account Security</a> </td>
    <td width="9%"><a href="/pages/home.htm" style="color: #ffffff; font-size: 10px; font-weight: normal; text-decoration: none"><img width="11" height="11" src="/Style%20Library/Images/bullet_square_grey.jpg" border="0" alt=""/> Home</a> </td></tr></tbody></table></span>&#160;</p>
    &#160;<p>&#160;</p>
    &#160;<p>&#160;</p>
    &#160;<p>&#160;</p>
    &#160;<p>&#160;</p>
    &#160;<p>&#160;</p>
    &#160;<p>&#160;</p>
    &#160;<p>&#160;</p>
    <p>&#160;</p>
    <p>Hello world!</p>

So, my second attempt to get rid of this strange behavior was to follow a suggestion I was given. That suggestion was to add the "Reusable Content" object, create the carriage return, and then enter a "Content Editor" Web Part. This results in a completely different bug occurring and thus doesn't work either. Essentially the code is as follows (prior to hitting Save & Close):

<p><span class="ms-reusableTextView ms-rtestate-read" id="__publishingReusableFragment" contenteditable="false" fragmentid="/ReusableContent/4_.000"><p><img src="/Style%20Library/Images/company_logo.jpg" alt="" style="margin: 5px"/></p>
    <table class="ms-rteTable-default" cellspacing="2" cellpadding="3" style="border-bottom: 0px; border-left: 0px; background-color: #840039; width: 750px; font-size: 1em; border-top: 0px"><tbody><tr><td width="66%">&#160;</td>
    <td width="8%"><a href="/pages/faq.htm" style="color: #ffffff; font-size: 10px; font-weight: normal; text-decoration: none"><img width="11" height="11" src="/Style%20Library/Images/bullet_square_grey.jpg" border="0" alt=""/> FAQs</a> </td>
    <td width="17%"><a href="/pages/security.htm" style="color: #ffffff; font-size: 10px; font-weight: normal; text-decoration: none"><img width="11" height="11" src="/Style%20Library/Images/bullet_square_grey.jpg" border="0" alt=""/> Account Security</a> </td>
    <td width="9%"><a href="/pages/home.htm" style="color: #ffffff; font-size: 10px; font-weight: normal; text-decoration: none"><img width="11" height="11" src="/Style%20Library/Images/bullet_square_grey.jpg" border="0" alt=""/> Home</a> </td></tr></tbody></table></span>&#160;</p>
    <p>&#160;</p>
    <p>&#160;</p>
    <div class="ms-rtestate-read ms-rte-wpbox" contenteditable="false"><div class="ms-rtestate-notify  ms-rtestate-read 7899d743-6ee1-4a15-b1b1-2462bb804e6a" id="div_7899d743-6ee1-4a15-b1b1-2462bb804e6a"></div>
    <div id="vid_7899d743-6ee1-4a15-b1b1-2462bb804e6a" style="display: none"></div></div>
    <p>&#160;</p>

Once I hit "Save & Close" however, it converts the code to the following:

<div id="__publishingReusableFragmentIdSection"><a href="/ReusableContent/4_.000">a</a></div>
    <p><span id="__publishingReusableFragment"></span>&#160;</p>
    <p>&#160;</p>
    <p>&#160;</p>
    <div class="ms-rtestate-read ms-rte-wpbox" contenteditable="false"><div class="ms-rtestate-notify  ms-rtestate-read 7899d743-6ee1-4a15-b1b1-2462bb804e6a" id="div_7899d743-6ee1-4a15-b1b1-2462bb804e6a"></div>
    <span id="__publishingReusableFragment"></span><div id="vid_7899d743-6ee1-4a15-b1b1-2462bb804e6a" style="display: none">&#160;</div></div>
    <p>&#160;</p>

I am at a loss at the moment as to how to correct this issue. And since this is functionality out-of-the-box, I am not sure why I appear to be the only one having this problem. This has been tested and proven on multiple computers, farms, and browsers. I could really use some help here.

Answer 1

I believe the cause for this problem has been identified here.

Answer 2

Nothing you can do about it, without custom development. The OOTB RTE is far from optimal. The perfect RTE does not exist, unfortunately.

In my opinion, you have 2 options here:

• Extend the OOTB RTE, create a CSS adapter or use some JQuery to fix the markup
• Implement another RTE. Take a look at the Telerik RadEditor for SharePoint. They also have their shortcoming, but maybe they deliver just the things you need

Answer 3

My guess is the nested <p> tags. There's one around the whole thing and then some nested within -- e.g. around the logo image. SP 2010 tries hard to clean up your HTML for you. If there is any mark up that it considers incorrect it will attempt to rewrite it "properly". It gets confused easily. I would recommend making your RC as barebones as possible. Remove all of the font tags, cell sizing etc., remove the outer <p> tag and the one around the image and try again. Also did the DOCTYPE DTD in your SP 2010 master/layout maybe get updated? Maybe more strict than your 2007 DTD. If it's stricter or more modern than 2007 be choking on the deprecated mark up.