How do I enable the native spell-checker in rich text fields?

Question

Using Spring 16

When using a inputTextArea with richText="true" Salesforce disables the browser's native spell-checker by setting spellCheck="false" on the displayed component.

It doesn't seem possible in Visualforce to configure the inputTextArea so that the spell checker is enabled, and many of the onEvent properties of the field don't work when the rich-text editor is switched on.

How do I get Salesforce to allow native spell-checking of the field?

Answer 1

The rich text editor in the Spring 16 release of Salesforce uses CKEditor.

Knowing that enables us to take advantage of its configurability.

Thankfully, CKEditor generally plays well with the native spell-checkers, just as long as you don't have the right-click menus of CKEditor enabled (Spring 16 doesn't).

So, in order to switch on the spell-checker (with a hack), all you need to do is tweak the configuration of the editor once Salesforce has set it up.

Assuming that you have jQuery on your pages already you can put the following script towards the top of the visualforce page or component:

<script type="text/javascript">
    var $j = jQuery.noConflict();
    $j( function() {
        CKEDITOR.on( 'instanceLoaded', function( e ) {
            e.editor.config.disableNativeSpellChecker = false;
        } );
    } );
</script>

That is, when CKEditor fires its instanceLoaded event, we get a handle on the instance of the CKEditor, and change the configuration so the spell checker is no longer disabled.

CKEditor then automatically applies the configuration immediately.

We use jQuery so that we can time the running of this function after the main javascript of Salesforce to have finished.

If you need to include jQuery, you can do this with:

<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js" />

However you'll probably want to bring the library into your code-base, possibly as a static resource.

Obviously, this isn't a Salesforce supported mechanism and it relies on Salesforce using CKEditor for the rich-text editor, and the version of CKEditor having its event model and configuration in this shape. This makes the solution fragile. But as long as you regression test the solution with every release of Salesforce I don't see why it shouldn't work.