David Talbot

Enabling native spell checking with Django-CMS 3

Mon 22 September 2014 / cmsdjangodjango-cms

We use Django-CMS extensively at the company I work for, Pancentric. I was recently given what, at first, seemed to be a fairly simple request: ensure that any misspelled words are highlighted within the default text editor.

I'm fairly new to CKEditor and although I'm liking using it so far, there are a certain number of features which make things... awkward. Spell checking is one of them.

The toolbar has a number of sensible defaults which can be seen in the image below.  Notice that, although the last three words are misspelled, there is no visual indication of this.

Default CKEditor layout

You'll notice that what I don't have here is either a spell-check button or the ability to see any misspelled words highlighted within the text editor itself.

After digging around for a while, it seemed that many of the recommendations for including a spell checker directed me to using a licensed plugin, something which I didn't want or need; I just wanted to enable the context menu to highlight misspelled words. Moreover, the context menu had been hijacked too, which stopped me from right-clicking on a word to get a context-specific menu.

In the end, after a bit of searching and finding some useful posts about the same issue (like this one and this one) I was able to hack together the following configuration. This sits within my settings.py file and gives a minimal working solution which allows misspelled words to be highlighted within the text editor and which doesn't force me to install any additional spell checking plugins:

    'disableNativeSpellChecker': False,  
    'removePlugins': 'contextmenu,liststyle,tabletools',  
    'toolbar_CMS': [  
        ['Undo', 'Redo'],  
        ['cmsplugins', '-', 'PasteText',],  
        ['Format', 'NumberedList','BulletedList',],  
        ['Bold', 'Italic', 'Underline', '-', 'RemoveFormat'],  
        ['Source', 'ShowBlocks',]  

Some notes on what I've done here:

  1. By default, disableNativeSpellChecker is set to True, so I needed to override this behaviour.
  2. I only actually needed to remove contextmenu from the removePlugins attribute: liststyle and tabletools depend upon contextmenu, so they needed to come out, too.
  3. The additional 'toolbar_CMS' config is not part of the problem above but illustrates how I've reduced the number of tool bar items to a sensible minimum in the image below

The final appearance of the editor after the changes have been made is as below.  Notice the final three nonsense words highlighted as misspelled (I'm using Chrome ):

CKEditor toolbar after configuring native browser spell checking