Spell checker on visualforce page

I need spell checker for some of the text area /rich text area fields on visualforce page.
There is an idea posted on IdeaExchange.Is there any work around for this.



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


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


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?t=" type="text/javascript"/>

// ckeditor replace with options
<script>CKEDITOR.timestamp = '';
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.'}}});

this enables all the ckeditor options and looks like:

CKeditor with all the options enabled

Source : Link , Question Author : sfdc , Answer Author : Keith Mancuso

Leave a Comment