This guide outlines the main steps that you need to follow in order to integrate and configure WProofreader with CKEditor 5. All the described steps are provided for the Cloud version of WProofreader.

Good to know:

  • Unlike CKEditor 4, where two WebSpellChecker plugins, SCAYT and WSC Dialog, are integrated by default and available under ABC button, there is no separate plugin for spelling and grammar check available in CKEditor 5.
  • WProofreader is a new ultimate multi-language proofreading tool. It provides both instant and on-click proofreading modes in a new convenient UI. It can be integrated with a wide range of various rich text editors, including CKEditor 5.

Step 1. Obtain service ID

Step 2. Initialize CKEditor 5

Before integrating and configuring WProofreader, CKEditor should be properly configured in your web application. If you haven't done it yet, refer to Quick Start of the CKEditor 5 documentation pages for details.

Step 3. Grant WProofreader access to CKEditor 5 instance

Adjust initialization of CKEditor 5 to grant WProofreader access to it. You need to add a link to CKEditor 5 instance object as shown in the example below.

<textarea name="content" id="editor">This is a sample text.</textarea>
 
<script>
        ClassicEditor
            .create(document.querySelector('#editor'))
            .then(editor => {                 
			editor.element.querySelector('.ck-editor__editable').editor = editor;
            })
</script> 

Step 4. Initialize WProofreader

Now you need to enable WProofreader with the autoSearch feature. You can initialize WProofreader in your web app: using the config variable or inline data attributes.

Option A. Initializing using config variable

1. Add config with options

2. Add WProofreader script

Option B. Initializing using inline data attributes

Step 5.  WProofreader for CKEditor 5 in action

Check this short video to see how WProofreader works in a bundle with CKEditor 5.