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.