Page History
...
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, 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.
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. 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
Excerpt Include | ||||||
---|---|---|---|---|---|---|
|
2. Add WProofreader
...
script
Excerpt Include | ||||||
---|---|---|---|---|---|---|
|
Option B. Initializing using
...
inline data attributes
Excerpt Include | ||||||
---|---|---|---|---|---|---|
|
Step 5. WProofreader for CKEditor 5 in
...
action
Check this short video to see how WProofreader works in a bundle with CKEditor 5.
...