Posted about 1 month ago. Visible to the public.

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

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.

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

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

    Copy
    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.

    Copy
    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.

By refactoring problematic code and creating automated tests, makandra can vastly improve the maintainability of your Rails application.

Owner of this card:

Avatar
Arne Hartherz
Last edit:
about 1 month ago
by Arne Hartherz
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Arne Hartherz to makandra dev
This website uses cookies to improve usability and analyze traffic.
Accept or learn more