Page History
This guide outlines the main steps that you need to follow in order to integrate and configure WebSpellChecker Proofreader WProofreader with CKEditor 5. All the described steps are provided for the Cloud version of WebSpellChecker ProofreaderWProofreader.
Tip |
---|
Good to know:
|
...
Step 1. Obtain Service ID
Excerpt Include | ||||||
---|---|---|---|---|---|---|
|
...
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, please refer to Quick Start on the CKEditor 5 documentation pages.
...
Step 3. Grant WProofreader Access to CKEditor 5 Instance
Adjust initialization of CKEditor 5 to grant grant WProofreader access to it. You need to add a link to CKEditor 5 instance object as shown on the example below.
Code Block | ||||
---|---|---|---|---|
| ||||
<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 as described in the initialization step of Get Started with WProofreader Cloud (autoSearch).
...
Step 5. WProofreader for CKEditor 5 in Action
Check this short video to see how WProofreader works in a bundle with CKEditor 5.
...