This guide outlines the main steps that you need to follow in order to integrate and configure WebSpellChecker Proofreader with CKEditor 5. All the described steps are provided for the Cloud version of WebSpellChecker Proofreader.
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.
- WebSpellChecker Proofreader (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.
0. Obtain Service ID
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.
1. 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.
2. 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 on 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>
3. Initialize WProofreader with 'autoSearch'
Now, you need to enable WProofreader with the autoSearch feature as described in the initialization step of Get Started with Cloud WebSpellChecker Proofreader (autoSearch).
4. WProofreader for CKEditor 5 in Action
Check this short video to see how WProofreader works in a bundle with CKEditor 5.
