Spell checker in custom Visualforce page

Author posted by Jitendra on Posted on under category Categories Salesforce and tagged as Tags with 7 Comments on Spell checker in custom Visualforce page

Using Salesforce Spell checker in custom Visualforce pages

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: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 title="Spell checking" columns="1" id="section2"> 
                <apex:inputTextarea id="caseDesc" value="{!case.Description}" cols="150" rows="10" />
    <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}', 
                         title:'Check Spelling',
                        '/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.');

Output :

Spell checker in custom Visualforce page
Spell checker in custom Visualforce page

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

Related posts

  • Priyanka Singh

    Hello sir,i am getting error while executing the page..please help.

    • Hi Priyanka, can u check if component name is correct in javascript method ?

  • Garima

    Hi Jitender,

    I’m getting error ‘An internal server error has occurred’ as mention below comments.

    • Hi Garima,
      Can you check if Org Id and User Id on line 32 and 33 are correct as per your org ? Also, on line 28, component name is correct ?

  • Ranu Agarwal

    I am also getting ‘An internal server error has occurred’ error, Please can you help me?

    • From Summer 16, Salesforce is not supporting Spell checker so this solution may not work.

  • Great! Knowledgeable article.