Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
RustyboyRustyboy 

Use jquery to enable spellcheck on rich text area

Hi,

We have customers that desparately need spell checking switched on for rich text areas (our app produces meeting minutes). I have read several posts about using jquery to "switch on" the spellcheck attribute but cannot get it to work. I have never used jquery before so am probably making a very basic mistake.

Here are the relevant code excerpts
  
<apex:page Controller="NewMeetingController" tabstyle="My_Meetings__tab" sidebar="false" 
	deferLastCommandUntilReady="true">

	<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" />
	<script>
		j$ = jQuery.noConflict();
		j$(document).ready(function() {
		j$('iframe[id*=meetingPurpose]').contents().find('body').attr('spellcheck','true');				
	   j$('iframe[id*=meetingOutcomes]').contents().find('body').attr('spellcheck','true');				
		});		
	</script>

etc..

     <apex:pageBlockSection id="meetingDescriptionsSection" title="Purpose & Outcomes" collapsible="false" columns="2" >          
          <apex:inputField value="{!series.Purpose__c}"  id="meetingPurpose" />
          <apex:inputField value="{!series.Outcomes__c}" id="meetingOutcomes"/>
     </apex:pageBlockSection>



And here is the page source excerptwith spell checker NOT enabled

<body id="j_id0:theForm:meetingDetailsBlock:meetingDescriptionsSection:meetingPurpose:textAreaDelegate_Purpose__c_rta_body" contenteditable="true" class="cke_editable cke_editable_themed cke_contents_ltr cke_show_borders" spellcheck="false">sdfsdf dfsdf dsf ds</body>

Any ideas?
 
Best Answer chosen by Rustyboy
RustyboyRustyboy
I finally found a method that works, and it targets all Rich Text Fields in the page. This enables the native broswer spellchecker

I found this solution at: 

http://salesforce.stackexchange.com/questions/108654/how-do-i-enable-the-native-spell-checker-in-rich-text-fields

Here is the script required: 
<apex:includeScript value="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"/>
<script type="text/javascript">
	    var $j = jQuery.noConflict();
	    $j( function() {
	        CKEDITOR.on( 'instanceLoaded', function( e ) {
	            e.editor.config.disableNativeSpellChecker = false;
	        });
	    });
</script>


 

All Answers

James LoghryJames Loghry
It looks like you're trying to rely on the standard browser's spell check capability.  You don't need jQuery for this.  Instead, change your Visualforce page to utilize html5 and then use the "html-spellcheck" attribute on your input elements, like in the following example:
  
<apex:page standardController="Account" docType="html-5.0">
    <apex:form>
        <apex:inputField html-spellcheck="true" value="{!Account.Name}" />
    </apex:form>
</apex:page>

The html- prefix lets Visualforce know that "spellcheck" is a custom attribute and to render it accordingly.

If you want to get fancy with the spell checking, there ARE several third party libraries you can find through a quick google search. 
RustyboyRustyboy
Thanks James, but I cannot get this to work. When I inspect the source code of the rendered HTML page is aways shows: 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

I have researched the spellcheck with RTA problem a fair bit, and changing the attribute using jquery seems to be the way to go
RustyboyRustyboy
I have now spent hours trying to make this work. I am reminded of the famouse Thomas Edison Quote

"I have not failed. I've just found 10,000 ways that won't work"

Any help on this greatly appreciated
RustyboyRustyboy
I finally found a method that works, and it targets all Rich Text Fields in the page. This enables the native broswer spellchecker

I found this solution at: 

http://salesforce.stackexchange.com/questions/108654/how-do-i-enable-the-native-spell-checker-in-rich-text-fields

Here is the script required: 
<apex:includeScript value="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"/>
<script type="text/javascript">
	    var $j = jQuery.noConflict();
	    $j( function() {
	        CKEDITOR.on( 'instanceLoaded', function( e ) {
	            e.editor.config.disableNativeSpellChecker = false;
	        });
	    });
</script>


 
This was selected as the best answer