Page History

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.

0. Obtain Service ID

1. Initialize CKEditor 5

Before integrating and configuring WSC ProofreaderWProofreader, 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 WSC Proofreader 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 WSC Proofreader WProofreader with the autoSearch feature as described in the initialization step of of Get Started with Cloud WebSpellChecker Proofreader (autoSearch).

4.

...

  WProofreader for CKEditor 5 in Action

Check this short video to see how WSC Proofreader WProofreader works in a bundle with CKEditor 5.

...