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 is a standalone application that can be integrated with a wide range of various rich text editors, including CKEditor 5.
- To get started with the trial or paid version of WebSpellChecker Proofreader, it is required to subscribe to the Cloud WebSpellChecker Proofreader services. On the subscription, you will receive an email with your encrypted service ID, an activation key, that is required for the WebSpellChecker Proofreader service activation.
1. Initialize CKEditor 5
Before integrating and configuring WebSpellChecker Proofreader, 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 WebSpellChecker Proofreader Access to CKEditor 5 Instance
Adjust initialization of CKEditor 5 to grant WebSpellChecker Proofreader 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. Add WebSpellChecker Proofreader Script
Add the wscbundle.js script on your web page.<script type="text/javascript" src="https://svc.webspellchecker.net/spellcheck31/wscbundle/wscbundle.js"></script>
Due to certain specifics of the CKEditor 5 implementation, only proofread in a dialog mode is available.
4. Initialize WebSpellChecker Proofreader with 'autoSearch'
Define the required configuration options in WEBSPELLCHECKER_CONFIG. Required options for the WProofreader Cloud: This is an example of the defining WEBSPELLCHECKER_CONFIG in a separate script directly on a web page. Alternatively, you can create a *.js file (e.g. wscbundle_config.js) with WEBSPELLCHECKER_CONFIG on your end and then load it from the file on your web page as shown in example below. This is an example of the wscbundle_config.js file with WEBSPELLCHECKER_CONFIG. Here is an example of the script that you need to add on your web page with the path to wscbundle_config.js.<script>
window.WEBSPELLCHECKER_CONFIG = {
autoSearch: true,
lang: 'auto', // set the default language
serviceId: 'your-service-ID' // the activation key for the Cloud-based version
};
</script>
window.WEBSPELLCHECKER_CONFIG = {
autoSearch: true,
lang: 'en_US',
serviceId: 'your-service-ID'
};
<script type="text/javascript" src="[path_to_config]/wscbundle_config.js"></script>
