This guide outlines the main steps that you need to follow for initializing CKEditor 5 with WProofreader.
Step 1. 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 the .
Step 2. Initialize WProofreader
Choose one of the options below how to enable spelling and grammar checking functionality of WProofreader in CKEditor 5:
Using autoSearch
When using this method, you need a CONFIG and a wscbundle.js script.<script> window.WEBSPELLCHECKER_CONFIG = { autoSearch:true, lang: 'uk_UA', ... }; </script> <script type="text/javascript" src="http(s)://your_host_name/wscservice/wscbundle/wscbundle.js"></script>
After setting up the autoSearch, WProofreader will be enabled as soon as the editable container with CKEditor is in focus.
- Using init() method
Initializing WProofreader using init() in CKEditor 5
<!-- Include the WEBSPELLCHECKER_CONFIG variable. --> <script> window.WEBSPELLCHECKER_CONFIG = { autoSearch: true, autoDestroy: true, ... }; </script> <script type="text/javascript" src="https://your_host_name/wscservice/wscbundle/wscbundle.js"></script> <div id="ckeditor5-editor"> <p>These are an examples of a sentences with two mispelled words and grammar problems. Just type text with misspelling to see how it works.</p> </div> <script> ClassicEditor .create(document.querySelector('#ckeditor5-editor')) .then(editor => { WEBSPELLCHECKER.init({ container: editor.ui._editableElements.get('main') }); }); </script>
When using this method, WProofreader will be started on the CKEditor 5 load.
Step 3. Further Actions
After you have initialized WProofreader in CKEditor 5, you can customize WProofreader options, its user interface, and behavior.