Read more

WProofreader: How to manually enable for a WYSIWYG editor instance (with CKeditor 4 example)

Arne Hartherz
October 16, 2019Software engineer at makandra GmbH

WProofreader is a spelling and grammar checking tool that integrates with textareas and numerous WYSIWYG editors.
While it usually activates automatically, depending on your application, it may fail to boot.

Illustration book lover

Growing Rails Applications in Practice

Check out our e-book. Learn to structure large Ruby on Rails codebases with the tools you already know and love.

  • Introduce design conventions for controllers and user-facing models
  • Create a system for growth
  • Build applications to last
Read more Show archive.org snapshot

In my case, an application was using CKEditor 4 and programmatically activated CKEditor. WProofreader's autoSearch logic failed to hook into that for some reason.

You can choose not to use its autoSearch feature, but explicitly enable WProofreader.
Here is a guide for CKEditor 4. It should apply to other WYSIWYG editors as well.

  1. If you are coming from SCAYT or WSC, remove those plugins from your CKEditor config as described in the migration guide Show archive.org snapshot

    config.removePlugins = 'scayt,wsc';
    
  2. Place your serviceId and other settings in the global configuration object:

    window.WEBSPELLCHECKER_CONFIG = {
      autoSearch: false, // we do that ourselves, so we disable it
      autoDestroy: true,
      lang: 'de_DE',
      serviceId: '...',
      // ...
    }
    
  3. Ensure https://svc.webspellchecker.net/spellcheck31/wscbundle/wscbundle.js is loaded as described in the docs.

  4. To activate WProofreader, you can now call WEBSPELLCHECKER.init on CKEditor's iframe (not the textarea). Note that you should be using CKEDITOR.replace to activate CKEditor.

    let editor = CKEDITOR.replace(element)
    editor.on('instanceReady', () => {
      WEBSPELLCHECKER.init({
        container: editor.window.getFrame().$
      })
    })
    

    WProofreader will detect CKeditor from that iframe and work its magic.

Posted by Arne Hartherz to makandra dev (2019-10-16 11:44)