Why are my publishing pages saying I have so many spelling errors?

In my publishing site, I have a basic custom content type that is based on the SharePoint out the box Page Content type. I have created a custom page layout. My layout contains a PublishingRollupImage, PublishingPageContent, and I’ve created a section on my page layout that only shows when you edit the page which contains PublishingContact. The publishing contact is mainly for search.

When my page is in edit mode, the screen looks like the following:

So I add a picture and some content to the page, and then go to publish it. The Page Content has been double checked and there is no spelling mistakes in there. However when I click publish, I get a pop-up box saying there are 73 spelling error(s) found. How is this possible? There isn’t even 73 words on the page.

The clue why this is happening is actually shown on the page. Where I have Page Owner at the bottom of the page, it clearly states “Spelling Errors Found.” But why? It’s just my name. If you click on the red text, it brings up a pop up, showing you what the spelling mistakes are.

What is actually happening is the user control HTML is being read. The user control has <textarea> which is hidden by css. This textarea is used by SharePoint to correctly display the User on the page, with the link to the user profile information. It is this text that is being spell checked.

There is a simple fix that you can add to your page layouts (assuming your page has jQuery already loaded). The textarea needs an attribute added to it called “excludeFromSpellCheck” which makes the SharePoint spell checker ignore the text within it. On your page layout page, find the ContentPlaceHolderID=”PlaceHolderMain” and right at the bottom of this section add a PublishingWebControls:EditModePanel with the following Javascript inside.

<PublishingWebControls:EditModePanel ID="SpellCheckEditModePanel" runat="server">
<script type="text/javascript">
jQuery(".ms-usereditor textarea").attr("excludeFromSpellCheck", "true");

The reason why we put it inside an EditModePanel is because the spell checking is only carried out when the page is in edit mode, so there is no need to run the JavaScript in display mode.

As you can see after implementing the jQuery change, we no longer get any spelling errors found.