How can we implement the spell checker in visualforce page for some text area in Salesforce ?

Hi Mohit,

You can enable a spell checker...along with many many more options in ckeditor using some javascript on your page. Its the same editor that the regular rich text editor they normally use but you'll just be adding other options including a spell check button.

simply add the following code to any visualforce page. the only setting you need to update is where is says CKEDITOR replace('...'

us the $Component global to target your text area

{!$Component.blogForm.blogBlock.blogSection.blogBody}

this should be the selector of the textarea you want to use... full documentation on how to use the $Component global to find the selector of your text field here

http://www.salesforce.com/us/developer/docs/pages/Content/pages_variables_global_component.htm

it should work both with rich text area fields or even just regular text area fields

// The rich text field itself
<apex:inputTextArea value="{!Post__c.Body__c}" id="blogBody" richText="false" />

/*
The rest of the form
*/

// at the bottom of the page add the script to update CK editor
<script src="/ckeditor/ckeditor-3.6.2/ckeditor.js?x74638" type="text/javascript"/>

// ckeditor replace with options
<script>CKEDITOR.timestamp = '3.6.2.1';
var prototocolAndHost = window.location.protocol + '//' + window.location.host;
var editor = CKEDITOR.replace('{!$Component.blogForm.blogBlock.blogSection.blogBody}', {baseHref : prototocolAndHost + '/ckeditor/ckeditor-3.6.2/', customConfig : '/ckeditor/ckeditor-3.6.2/ckeditor.config.js', height : '425', bodyId : 'articleEdit:createDocumentForm:sectionRepeat:0:fieldRepeat:0:fieldName:textAreaDelegate_00NG0000009Thtt_rta_body', toolbar : 'Full', sharedSpaces : { top : 'cke_topSpace', bottom : ' cke_bottomSpace' }, filebrowserImageUploadUrl : '/_ui/common/request/servlet/RtaImageUploadServlet', contentsCss : ['/sCSS/27.0/sprites/1362621144000/Theme3/default/gc/ArticleHtmlDetailElem.css'], disableNativeSpellChecker : false,language : 'en-us',sfdcLabels : { CkeMediaEmbed : { title : 'Embed Multimedia Content', description : 'Use &lt;iframe&gt; code from DailyMotion, Vimeo, and Youtube.', subtitle : 'Paste &amp;lt;iframe&amp;gt; code here:', exampleTitle : 'Example:', example : '\n \n &lt;iframe width=\&quot;560\&quot; height=\&quot;315\&quot; src=\&quot;https://www.youtube.com/embed/KcOm0TNvKBA\&quot; frameborder=\&quot;0\&quot; allowfullscreen&gt;&lt;/iframe&gt;\n \n ', iframeMissing : 'Invalid &lt;iframe&gt; element. Please use valid code from the approved sites.'}, sfdcSwitchToText : { sfdcSwitchToTextAlt : 'Use plain text'}, CkeImageDialog : { uploadTab : 'Upload Image', infoTab_url : 'URL', error : 'Error:', uploadTab_desc_info : 'Enter a description of the image for visually impaired users', uploadTab_desc : 'Description', infoTab_url_info : 'Example: http://www.mysite.com/myimage.jpg', btn_insert : 'Insert', missingUrlError : 'You must enter a URL', uploadTab_file : 'Select Image', infoTab_desc : 'Description', btn_upadte : 'Update', wrongFileTypeError : 'You can insert only .gif .jpeg and .png files.', infoTab : 'Web Address', title : 'Insert Image', infoTab_desc_info : 'Enter a description of the image for visually impaired users', uploadTab_file_info : 'Maximum size 1 MB. Only png, gif or jpeg'}, CkeImagePaste : { CkeImagePasteWarning : 'Pasting an image is not working properly with Firefox, please use [Copy Image location] instead.'}}});
</script>

Thanks.