none
WYSIWYG Editor - Really need some help here

    Question

  • Good Morning -

    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:

    1. 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 &#160;<p>&#160;</p> 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>

    2. 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.

    -Mike

    Thursday, September 22, 2011 1:02 PM

Answers

  • Essentially I had to do the following to get this to work properly. Although I don't feel this is a good solution because doing this means Content Editors can enter ANY HTML they want without ANY validation.

    Honestly SharePoint should allow you to turn validation on and off, rather then forcing validation. You can force validation but, allow that to be a admin decision.

    http://blog.mastykarz.nl/publishing-rich-html-no-limitations-sharepoint-2010/

    That link describes the steps I took to resolve this issue for myself.

    • Marked as answer by mallen22842 Wednesday, February 29, 2012 6:25 PM
    Wednesday, February 29, 2012 6:25 PM

All replies

  • Good Afternoon -

    I apologize if this has already been posted, however I am unable to do a search on the forum as the search is timing out on this forum.  Regardless, my question is directly related to the WYSIWYG editor that you access while editing a page in the web browser.  It appears that a paragraph tag is being added with the character entity for a non-breaking space.  It does this without my want of it on the page.  Also, it strangely adds a new one if I use any of the drop-down menus.  For example.  If I move my mouse up and down the context menu for changing font color, it automatically adds the paragraph tags without my consent.

    It seems like very strange behavior and I can't imagine that I am the only one having this problem.  Any assistance or advice is welcome.  Thanks.

    Monday, September 19, 2011 7:22 PM
  • I think this is the standard default behavior... if you want BR tags instead of P tags you can do "shift + enter" just like in Word.
    sayitfast
    Monday, September 19, 2011 8:08 PM
  • When using the content editor web part if you did not like what it was doing, you could link to your HTML instead of typing it into the window.  This is also a better choice as well, you don't loose your markup if someone deletes your web part.

    Here is a link which may help you.

    http://virtualizesharepoint.com/2011/05/14/how-to-edit-source-in-content-editor-web-part-in-sharepoint-2010/

    Good luck,

    Gary

    blog www.sharepoint2010now.com

     


    Gary Newman MCSE, MCT, CCNA MCDBA, MCAD, MCSA MCTS SharePoint 2007 Dev & Admin MCPD SharePoint 2010 Development My Blog www.sharepoint2010now.com
    Monday, September 19, 2011 8:19 PM
  • Thank you for the quick reply.  It is not a Web Part I am editting though.  I am very simply doing the following:

    Page => Edit => Page Content

    In the "Page Content" area I am simply typing some text in.  If I decide I want to do something, such as change the font color, hovering the mouse around the color pallete is causing a...

    &#160;<p>&#160;</p>

    ...line to be entered for every color I hover over.  In otherwords, the more colors I hover over I can actually see the paragraph breaks getting added on the screen in real time.

    Or if I hit save, it is adding these line breaks in random places between the code.  Thus, making the final result look different then what I as attempting to save.

    I don't think that avoiding the WYSIWYG editor all together and referencing an HTML file elsewhere is a very good solution.  I have tried this from multiple computers against different servers on the farm.  I get the same bug-like effect.  So I can't imagine I am the only one having this problem with the editor.

    Monday, September 19, 2011 8:41 PM
  • Anybody? :-/
    Tuesday, September 20, 2011 4:15 PM
  • Then I would either try using a different web browser, or I would edit the content with SharePoint Designer.  With Designer you can directly add in the HTML of choice.

    Good luck,

    Gary

    blog www.sharepoint2010now.com

     


    Gary Newman MCSE, MCT, CCNA MCDBA, MCAD, MCSA MCTS SharePoint 2007 Dev & Admin MCPD SharePoint 2010 Development My Blog www.sharepoint2010now.com
    Wednesday, September 21, 2011 1:37 PM
  • I am not sure if ignoring the problem is a viable solution.  LOL.

    On a side note, Designer is not an alternative because it will not allow me to edit page content.  It prompts me to edit page content via the browser.  This is potentially due to me using a Publishing site template (this is a public facing website).

    Wednesday, September 21, 2011 6:09 PM
  • Hey ... Did you find the solution for your issue ... Even I'm facing same issue and it is killing around 40k people now :-( ....

    If you find any solution can you post it here....

    Wednesday, September 28, 2011 11:40 AM
  • Hello,

    I tried to reproduce this behavior and not experiencing the same behavior on my test environment. My SharePoint environment is SP1 + Aug'11 CU (14.0.6109.5002)

    I would like to reproduce your issue on my test farm to further troubleshoot this; please provide the below information.

    • What is the publishing template you are using?
    • Are you using SP1 and what CU?
    • Are you seeing these extra &#160;<p>&#160;</p> when you do view source? (I dont see these extra entries when doing view source)

     


    Please remember to click 'Mark as Answer' on the post that helps you or click 'Unmark as Answer' if a marked post does not actually answer your question. This can be beneficial to other community members reading the thread.

    Regards,
    Nishant Shah
    Microsoft Online Community Support

    Thursday, September 29, 2011 11:03 AM
  • What site template are you using? Team site, Publishing site?  etc... 
    sayitfast
    Sunday, October 02, 2011 8:46 AM
  • Did you ever find a solution to this problem? I'm having the same issue
    Tuesday, October 04, 2011 5:31 PM
  • I too am also having this issue. We're using publishing sites here and I used a Publishing Page template. I've seen this on more than one page on completely separate collections (both are publishing sites). This pages/sites existed in SP2007 as a publishing pages/sites and appeared to migrate with no issues. When I edit page (Page tab in the ribbon > Edit) and go look at HTML Source I see the following (sry for the blackout - government)

    Now looking at the page there is a single "line" of space above February. I click OK here (making no changes) and get "Warning: The HTML source you entered might have been modified."

    I add a link under March and press enter and it seems like the cursor jumps and makes three lines. When I look at the HTML source I see

    I could defiantly use some insight here.

    • Edited by semt70 Tuesday, October 04, 2011 8:44 PM
    Tuesday, October 04, 2011 8:24 PM
  • Hello semt70,

    As I mentioned above, I was not able to reproduce this issue in the latest build. Could you try on a latest build or let me know the patch level for SharePoint 2010 farm?

    Also, Is this happening only for the sites which are upgraded from SharePoint 2007? What if you create a fresh site collection in a new Content DB?


    Please remember to click 'Mark as Answer' on the post that helps you or click 'Unmark as Answer' if a marked post does not actually answer your question. This can be beneficial to other community members reading the thread.

    Regards,
    Nishant Shah
    Microsoft Online Community Support
    Wednesday, October 05, 2011 8:06 AM
  • We are on Feb 2011 (14.0.5136.5002) of SP1. I have only noticed the issue in migrated pages. In some additional testing I performed yesterday I created a new page and attempted to force the problem and was unable to do so. In another situation I took a known problem page and copy/pasted the contents into a new page, I have not been able to replicate the issue in the new page. However, the issue seems to be intermittent so I'm going to do another round of testing to see if I can force the problem.
    • Edited by semt70 Wednesday, October 05, 2011 5:31 PM
    Wednesday, October 05, 2011 4:37 PM
  • I have come to the conclusion that the issue is rooted in the migrated page. I've been pounding on the new pages for two days with no incidents of additional lines. I do on occasion get an extra line when using Return but that is corrected and seems to remain corrected by using Delete. 

     

    Going forward my resolution for this issue will be to copy the content into a new publishing page and deleting the old page.

    Thursday, October 06, 2011 11:21 PM
  • Thank you for the update and confirmation
    Please remember to click 'Mark as Answer' on the post that helps you or click 'Unmark as Answer' if a marked post does not actually answer your question. This can be beneficial to other community members reading the thread.

    Regards,
    Nishant Shah
    Microsoft Online Community Support
    Friday, October 07, 2011 2:47 PM
  •  

    Sorry I haven't replied back to this. I am pleased to see that I am not the only one who has experienced this issue when editing content. As I kept getting the response of "It must be something you are doing". Even though I am only using what is OOTB with SharePoint.

    I have found what I believe is occurring but, still don't have what I consider an appropriate answer for a correction.

    To keep things manageable and secure in SharePoint 2010, the Publishing HTML Field is equipped with a number of filters / security checks that prevent content editors from using potentially harmful markup on their web pages. The field uses a type of allowance system that dictates which HTML tags and attributes are allowed. Everything else that isn't in this white list is removed when content is saved.

    I believe this "feature" is what is adding unnecessary paragraph tags when it is does it's job of checking the HTML for validity.

    A workaround is creating a separate Publishing HTML Field through SharePoint's extensibility capabilities which circumvents this white list / validation check. However, I don't believe this is an appropriate permanent solution because now the content editors are entering unchecked / potentially invalid HTML.

     

    @Nishant

    • What is the publishing template you are using?
      - We are using a Publishing Portal template. Specifically Publishing Site with Workflow, Enterprise Wiki, and Blank Site are enabled.
    • Are you using SP1 and what CU?
      - The following is installed:

         Service Pack 1 is installed.



    • Are you seeing these extra &#160;<p>&#160;</p> when you do view source? (I dont see these extra entries when doing view source)
      - The extra tags appear when both viewing source and when you click on "Markup -> HTML -> Edit HTML Source" in the ribbon.
    • Marked as answer by mallen22842 Tuesday, November 29, 2011 4:43 PM
    • Unmarked as answer by mallen22842 Tuesday, November 29, 2011 4:43 PM
    Tuesday, November 29, 2011 4:40 PM
  • Hello,

    See if the workaround provided by semt70 could help i.e. If you migrate the content from problem page to newly created page and see if the problem occurs?


    Please remember to click 'Mark as Answer' on the post that helps you or click 'Unmark as Answer' if a marked post does not actually answer your question. This can be beneficial to other community members reading the thread.

    Regards,
    Nishant Shah
    Microsoft Online Community Support
    Monday, December 05, 2011 8:40 AM
  • My facility is experiencing this problem as well. Our users are ripping their hair out.

    Many unwanted SPAN's and DIV's appear in the code \and Ordered lists are a challenge to create. This is using simply using the page content area.

    Wednesday, December 07, 2011 11:22 PM
  • Hello,

    See if the workaround provided by semt70 could help i.e. If you migrate the content from problem page to newly created page and see if the problem occurs?


    Please remember to click 'Mark as Answer' on the post that helps you or click 'Unmark as Answer' if a marked post does not actually answer your question. This can be beneficial to other community members reading the thread.

    Regards,
    Nishant Shah
    Microsoft Online Community Support

    The workaround by semt70 does not correct this issue. Migrating the content from problem page to new page does nothing. Likely because the same white list / validation filter is used on both pages. EDIT: Please note this is not a migrated site (2007). This is a fresh installation of 2010 with new content being entered.

    As I stated before:

    "A workaround is creating a separate Publishing HTML Field through SharePoint's extensibility capabilities which circumvents this white list / validation check. However, I don't believe this is an appropriate permanent solution because now the content editors are entering unchecked / potentially invalid HTML."

    To date I have yet to find an applicable solution other then circumventing SharePoint's OOTB Publishing HTML Field.


    • Edited by mallen22842 Wednesday, February 29, 2012 7:07 PM Added content
    Wednesday, February 29, 2012 6:16 PM
  • Essentially I had to do the following to get this to work properly. Although I don't feel this is a good solution because doing this means Content Editors can enter ANY HTML they want without ANY validation.

    Honestly SharePoint should allow you to turn validation on and off, rather then forcing validation. You can force validation but, allow that to be a admin decision.

    http://blog.mastykarz.nl/publishing-rich-html-no-limitations-sharepoint-2010/

    That link describes the steps I took to resolve this issue for myself.

    • Marked as answer by mallen22842 Wednesday, February 29, 2012 6:25 PM
    Wednesday, February 29, 2012 6:25 PM
  • Ok so my html started like this:

    <div>&#160;</div>
    <span><p class="ms-rteThemeForeColor-1-0 ms-rteThemeBackColor-5-0 ms-rteFontSize-4" style="text-align: center"><span><a name="contents">Contents</a></span></p>
    <p><span class="ms-rteFontSize-4 ms-rteThemeForeColor-5-0"></span>&#160;</p>

    towards the end of my html every time I did some text formatting or hovered over the colour palette on the ribbon several of these would get added:

    <p>&#160;</p>

    <p>&#160;</p>

    <p>&#160;</p>

    I found that by deleting out the open span tag at the beginning of my code I was able to stop this behaviour.

    <div>&#160;</div>
    <span><p class="ms-rteThemeForeColor-1-0 ms-rteThemeBackColor-5-0 ms-rteFontSize-4" style="text-align: center"><span><a name="contents">Contents</a></span></p>
    <p><span class="ms-rteFontSize-4 ms-rteThemeForeColor-5-0"></span>&#160;</p>

    My html started like this instead:

    <div>&#160;</div>
    <p class="ms-rteThemeForeColor-1-0 ms-rteThemeBackColor-5-0 ms-rteFontSize-4" style="text-align: center"><span><a name="contents">Contents</a></span></p>
    <p><span class="ms-rteFontSize-4 ms-rteThemeForeColor-5-0"></span>&#160;</p>

    I'm not sure whether the span tag was responsible for the strange behaviour but possible part of the reason why spaces were happening...maybe I was missing a close span.

    Hope this is of some help.

    Tuesday, May 15, 2012 2:46 PM
  • Putting <br/> at the end of your html in the content editor webpart can help stop extra spaces at the end as well.
    Tuesday, July 10, 2012 9:05 AM
  • I fail to see how replacing the OOB publishing field is marked as a solution. 
    Wednesday, July 11, 2012 7:21 PM
  • I fail to see how replacing the OOB publishing field is marked as a solution. 

    As I had stated before I didn't (and still don't) feel it is a good solution. But if the validation within the WYSIWYG ruins your page design, by adding or removing code, as it appears for your users then I challenge someone to provide a better solution. And the better solution can't be "Just re-design your content in SharePoint® Designer" because not all users within an organization have access to SharePoint® Designer.

    The ideal solution would be for Microsoft to allow Developers to modify the validation rules on the WYSIWYG. This way strange behavior as I described in my original posting could be avoided when it crops up. Instead they silo off this HTML / XHTML compatibility validation code so no one can extend or modify it.


    Michael Allen (.NET and SharePoint 2010 Developer)

    Wednesday, July 11, 2012 7:34 PM
  • The problem here is that SharePoint is attempting to validate and correct bad HTML.  If you have html that doesn't validate, SharePoint attempts to fix it.  

    What you see that is output to the page is the SharePoint fix.  Classic example is a p-tag within a p-tag, which is not well formatted HTML, SharePoint tries to fix it and you get a bunch of this junk 

    <p>&#160;</p>

    Since this actually doesn't fix the problem, each time it tries to validate, it creates more of these.  Fix the bad HTML and you fix the problem.  Why you can't turn off this validation is beyond me.

    • Edited by Hobbs_ Wednesday, October 24, 2012 5:50 PM
    • Proposed as answer by Sophie Williams Thursday, May 02, 2013 3:23 PM
    • Unproposed as answer by mallen22842 Thursday, May 02, 2013 6:43 PM
    Wednesday, October 24, 2012 5:45 PM
  • Hi,

    I am facing the same issue mentioned in this forum post.

    Is there any solution to this?

    Thanks,

    Nirav


    cool

    Friday, January 11, 2013 10:07 PM
  • Nirav -

    The only solution I found to circumvent the white list validation that Microsoft does on HTML input was following these instructions: http://blog.mastykarz.nl/publishing-rich-html-no-limitations-sharepoint-2010/

    All the other recommendations here did not work.

    Best of luck,

    Mike


    Michael Allen (.NET and SharePoint 2010 Developer)

    Sunday, January 13, 2013 2:07 PM
  • The problem here is that SharePoint is attempting to validate and correct bad HTML.  If you have html that doesn't validate, SharePoint attempts to fix it.  

    What you see that is output to the page is the SharePoint fix.  Classic example is a p-tag within a p-tag, which is not well formatted HTML, SharePoint tries to fix it and you get a bunch of this junk 

    <p>&#160;</p>

    Since this actually doesn't fix the problem, each time it tries to validate, it creates more of these.  Fix the bad HTML and you fix the problem.  Why you can't turn off this validation is beyond me.

    This issue occurs even if you have valid HTML (ran through the Markup Validation Service). So this is not the case. I just wanted to point this out.

    Michael Allen (.NET and SharePoint 2010 Developer)

    Thursday, May 02, 2013 6:43 PM
  • I found that I had the same problem, and discovered that if I had a <div> tag inside of a <p> tag that caused the extra <p>&#160;<p> to be added to the code every time the page loaded in edit mode.

    Once I moved the nested div tag out the extra paragraphs stopped appearing.

    So while technically my code was valid, there must be some HTML encode scripting that seems to not like certain things being nested in certain things.

    I found that be slowly pasting small blocks of your code into empty Content Editors you can quickly home in on the offending block.  Then it's simply a matter of rearranging your code so that SharePoint stops messing it up.


    • Edited by Steve Mak Wednesday, August 21, 2013 12:54 PM
    Wednesday, August 21, 2013 12:53 PM