Spell checker in custom Visualforce page

Standard email functionality in Salesforce supports spell checker out of the box. These days, all modern browsers already has spell checker and customer may agree to use it. However there are some customer, who wants standard look and feel of application include spell checking.

We might be in need to create a custom Visualforce page with spell checker functionality same as of out of the box. Salesforce does not support it in custom pages and there are no pure JavaScript based libraries available to support spell and grammar checking. JavaScript libraries, I have seen, needs to access server side endpoint implemented either in PHP or any language. We can try to use those libraries, however we need to use AJAX request to get spelling and grammar suggestions.

I did a small hack in my Livecoding session to reuse standard Salesforce spell checker in Visualforce page.

Below code is self explanatory, where I have used standard Salesforce JavaScript file to perform all heavy lifting.

<apex:page standardController="Case">
    <apex:form id="frmId">
    	<apex:pageBlock title="Case Details" mode="edit" id="pgBlock">
        	<apex:pageblockbuttons >
            	<apex:commandButton action="{!Save}" value="Save"/>
                <apex:commandButton action="{!Cancel}" value="Cancel"/>
                <input type="button" value="Check Spelling" class="btn" onclick="doSpellingCheck()"/>
            </apex:pageblockbuttons>
            
            <apex:pageBlockSection title="Case Fields" columns="2">
            	<apex:inputField value="{!case.AccountId}"/>
                <apex:inputField value="{!case.contactId}"/>
                <apex:inputField value="{!case.status}" required="true"/>
            </apex:pageBlockSection>
            
            <apex:pageBlockSection title="Spell checking" columns="1" id="section2"> 
                <apex:inputTextarea id="caseDesc" value="{!case.Description}" cols="150" rows="10" />
            </apex:pageBlockSection>
            
        </apex:pageBlock>
    </apex:form>
    
    <script type="text/javascript" src="https://zaa-dev-ed.my.salesforce.com/static/111213/js/spch.js"> </script>
    
    <script type="text/javascript">
     
    	function doSpellingCheck(){
            	doSpell({ctrl: '{!$Component.frmId.pgBlock.section2.caseDesc}', 
                         lang:'en_US',
                         title:'Check Spelling',
                         intLang:'en_US',
                         organizationId:'00D40000000Iekr',
                         userId:'00540000000nz6A'}, 
                        '/servlet/SProxyWrapper', document.location.protocol + '//' + 'spell-chi.salesforce.com/spellcheck', 
                        'There is nothing to check', 
                        'We are sorry,our spellchecker currently does not support the browser you are using. Please upgrade your browser.', 
                        'The Spell Checker is not available in this language.');
            }
    </script>
</apex:page>

Output :

Update 05/11/2016– From Summer 16, Salesforce is not supporting Spell checker so this solution may not work.