Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

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.

share|improve this question
1  
That's the problem we're currently trying to fix via Microsoft support. I really hope fix will be available in the next cumulative update for SP 2010. –  Alexander Shvetsov Nov 22 '11 at 10:12

3 Answers 3

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
share|improve this answer
    
I'm not attempting to find the "perfect RTE". The native editor in SharePoint though is incredibly buggy. I am a little surprised that custom development or a completely separate editor needs to be installed. Ironically I attempted to replace the editor using CKEditor. But, the editor that you use to edit a content placeholder does not get replaced. And that is the editor that I need fixed. Seems a bit much for a piece of software that is this expensive. –  MAllen22842 Sep 30 '11 at 12:18

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.

share|improve this answer
    
Graham's answer mostly worked for me. Deleting </p> tags at the end stopped sharepoint putting extra paragraphs at the end –  user11453 Oct 18 '12 at 17:01
up vote 0 down vote accepted

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

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.