This guide outlines the main steps that you need to follow in order to integrate and configure WProofreader with CKEditor 5 v12.0 and higher. All the described steps are provided for the Cloud version of WProofreader.
WProofreader provides two modes for text proofreading: as you type in the editable area and in a separate dialog.
The second mode with the dialog is a static mode where the editing is restricted to applying or rejecting changes suggested by WProofreader engine. There is no option that allows real-time text editing or synchronization in the dialog as this is available in as you type mode.
As a result, there are a list of modes and plugins of CKEditor 5 are not compatible and contradict with the use of the dialog mode. You have to disable the dialog mode to avoid any confusion or unexpected behavior, if you are using one of the following modes or plugins of CKEditor 5: real-time collaboration features or multi-root editor.
Check the details in the How to disable the dialog mode in WProofreader guide.
1. Subscribe to service
Sign up for the trial version to get started with WProofreader Cloud. Once you have subscribed, you will receive an email with your service ID, an activation key, required for the WProofreader service activation. If you already have one, you can skip this step.
If you already have one, you can skip this step.
2. Initialize CKEditor 5
Before integrating and configuring WProofreader, make sure CKEditor 5 is properly configured in your web application. To initialize CKEditor 5, follow the steps described in CKEditor 5 Quick Start guide.
3. Grant WProofreader access to CKEditor 5 instance
If your are using CKEditor 5 versions below v12.3.0, you need to adjust initialization of CKEditor 5 and grant WProofreader access to it. To do so, add a link to CKEditor 5 instance object as shown in the example below.
4. Initialize WProofreader
Choose one of the options below to enable spelling and grammar checking functionality of WProofreader in CKEditor 5.
Option A. Using autoSearch (The easiest)
When using this method, you need a config variable CONFIG and a wscbundle.js script. After setting up the autoSearch, WProofreader will be enabled as soon as the editable container with CKEditor is in focus. Follow the steps described in the Get started with WProofreader Cloud (autoSearch).
Option В. Using init() method
When using this method, WProofreader will be started on the CKEditor 5 load.
Initializing WProofreader using init() in CKEditor 5
5. Activate service
To activate the Cloud version of WProofreader, you are required to add serviceId option to the CONFIG with your activation key and specify the correct path to the wscbundle.js file on our Cloud. Update the path to WProofreader wscbundle.js file in case of the Cloud version as follows:
Update the path to WProofreader wscbundle.js file in case of the Cloud version as follows:
6. Further actions
After initialization, you can customize WProofreader options, its user interface, and behavior using WProofreader customization options. More options and methods for advanced customization are available in API docs.
You can see the demo of CKEditor 5 integration on our web site.