14

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.

https://success.salesforce.com/ideaview?id=08730000000BrhqAAC

1
  • 1
    Some browsers, such as Chrome and Firefox, have a native spell-check included. I don't know if/how well they work for non-English languages, though, in case that's a concern.
    – Mike Chale
    Sep 16, 2013 at 19:20

2 Answers 2

10
+50

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?t=3.6.2.3" 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>

this enables all the ckeditor options and looks like:

CKeditor with all the options enabled

5
  • This is great. I failed to get this working and thats why I deleted my answer. I found some posts suggesting this disableNativeSpellChecker only works with firefox. Is this accurate in your experience?
    – Phil Rymek
    Sep 25, 2013 at 18:49
  • hmm it seems to work fine for me in chrome as well? Oct 3, 2013 at 13:17
  • This no longer appears to function as a work-around. Sep 25, 2014 at 21:01
  • Works just fine for me? Sep 26, 2014 at 3:39
  • It's not working for me, this is what the console is throwing: Uncaught TypeError: Cannot read property 'getEditor' of undefined a @ ckeditor.js?t=4.5.3.3:300 CKEDITOR.replace @ ckeditor.js?t=4.5.3.3:304
    – flor
    Feb 7, 2016 at 0:00
4

One possible workaround is to take advantage of the browsers spell checking capabilities. Firefox, Chrome, and IE10 have a spell checker that you can enable in their advanced settings. I have used this in my VF pages and it works fine.

https://support.google.com/chrome/answer/95604?hl=en

http://support.mozilla.org/en-US/kb/how-do-i-use-firefox-spell-checker

http://ie.microsoft.com/testdrive/Browser/SpellChecking/

enter image description here

I know isn't a great solution as you can't control the browser settings for each individual user, but it definitely is one work around

As @sfdcfox points out, BJSpell is also a possible solution to support older versions of IE. I have never personally used BJSpell with SF though.

9
  • Users are on Internet Explorer
    – sfdc
    Sep 16, 2013 at 19:26
  • I was afraid of that. While there is nothing native, there are a great number of add-ons that allow for spell checking in IE. A quick google search gave me many possibilities Sep 16, 2013 at 19:29
  • I believe IE10 has spell checking built in (just like Chrome and Firefox).
    – Matt K
    Sep 16, 2013 at 19:35
  • Yes, it appears as though you're right. Thanks @Matthew Keefe Sep 16, 2013 at 19:36
  • But Users are on IE8,IE9
    – sfdc
    Sep 16, 2013 at 19:37

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .